:root {
    --h2h-teal: #40bfa8;
    --h2h-teal-dark: #159f8c;
    --h2h-pink: #f2387f;
    --h2h-light: #f7f9fb;
    --h2h-dark: #222831;
    --h2h-muted: #6c757d;
}

.charity-landing-editor-shell,
.charity-public-landing {
    background: #fbfcfd;
}

.charity-editor-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 22px;
}

.charity-editor-heading h1 {
    margin: 10px 0 4px;
    font-size: 30px;
    color: #20242a;
}

.charity-editor-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.charity-landing-editor-form {
    padding: 24px;
}

.charity-editor-panel {
    height: 100%;
    padding: 18px;
    border: 1px solid #e8edf1;
    border-radius: 8px;
    background: #fff;
}

.charity-editor-panel h2 {
    font-size: 18px;
    margin-bottom: 16px;
}

.charity-editor-preview {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #e8edf1;
}

.charity-editor-preview.is-small {
    max-height: 120px;
}

.charity-remove-image {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.charity-editor-savebar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef1f4;
}

.charity-public-container {
    max-width: 1420px;
    padding: 28px 20px 54px;
}

.charity-public-banner {
    width: 100%;
    height: 310px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.charity-public-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 26px;
    align-items: start;
}

.charity-public-main {
    min-width: 0;
}

.charity-public-card {
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.business-public-container {
    max-width: 1260px;
}

.business-public-banner {
    height: 250px;
}

.business-public-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.business-public-top-grid > .h2h-card {
    height: 100%;
    margin-bottom: 0;
}

.business-public-hero {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 24px 28px;
    text-align: center;
}

.business-public-logo {
    width: 180px;
    height: 180px;
    margin-top: -2px;
    border-radius: 50%;
    object-fit: cover;
    background: #f7f7f7;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.business-public-hero h1 {
    margin: 0;
    color: #20242a;
    font-size: 2rem;
    font-weight: 800;
}

.business-public-hero p {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 8px;
    color: #20242a;
}

.business-public-hero .btn {
    max-width: 620px;
    min-width: 0;
    width: min(100%, 620px) !important;
}

.business-verified-card {
    align-content: center;
    box-sizing: border-box;
    height: 100%;
    margin-top: 0;
    min-height: 0;
}

.business-public-section {
    text-align: center;
}

.business-public-charity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.business-public-charity-card {
    border: 1px solid #edf0f3;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
}

.business-public-description {
    max-width: 960px;
    margin: 0 auto;
}

.business-public-charity-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 16px;
}

.business-public-charity-card img {
    width: 68px;
    height: 68px;
    object-fit: cover;
}

.business-public-charity-card h3 {
    margin: 0;
    color: #20242a;
    font-size: 1.25rem;
    font-weight: 800;
}

.business-public-charity-card p {
    margin: 0;
}

.business-public-charity-card .btn {
    width: 100%;
    margin-top: 8px;
}

.business-public-rewards-grid {
    margin-top: 18px;
}

.business-public-rewards-by-charity {
    display: grid;
    gap: 22px;
    margin-top: 18px;
}

.business-public-reward-charity-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.business-public-reward-charity {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    min-height: 150px;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    background: #fff;
    color: #20242a;
    padding: 18px 14px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 5px 16px rgba(25, 32, 38, 0.07);
}

.business-public-reward-charity:hover {
    border-color: var(--h2h-teal);
    color: var(--h2h-teal-dark);
}

.business-public-reward-charity img {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    object-fit: cover;
}

.business-public-reward-charity strong {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.business-public-reward-scroll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    max-height: 304px;
    overflow-y: auto;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 5px 16px rgba(25, 32, 38, 0.07);
}

.business-public-reward-scroll::-webkit-scrollbar {
    width: 10px;
}

.business-public-reward-scroll::-webkit-scrollbar-thumb {
    background: rgba(64, 191, 168, 0.7);
    border-radius: 999px;
}

.business-public-reward-ticket {
    grid-template-columns: 96px 1fr;
    min-height: 128px;
    box-shadow: 0 4px 12px rgba(25, 32, 38, 0.12);
}

.business-public-reward-ticket .reward-ticket-info {
    gap: 4px;
    padding: 10px 12px 10px 16px;
}

.business-public-reward-ticket .reward-ticket-value {
    gap: 4px;
    padding: 10px 8px;
}

.business-public-reward-ticket .reward-ticket-value strong {
    font-size: 1.35rem;
}

.business-public-reward-ticket .reward-ticket-value span,
.business-public-reward-ticket .reward-ticket-value small,
.business-public-reward-ticket .reward-ticket-value b {
    font-size: 0.74rem;
    line-height: 1.05;
}

.business-public-reward-ticket .reward-ticket-info strong {
    font-size: 0.95rem;
}

.business-public-reward-ticket .reward-ticket-info span {
    font-size: 0.78rem;
    line-height: 1.15;
}

.charity-public-title {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 22px;
}

.charity-public-title img {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
}

.charity-public-title h1 {
    font-size: 34px;
    margin: 0 0 8px;
    color: #20242a;
}

.charity-public-title p {
    margin: 2px 0;
}

.charity-campaign-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}

.charity-campaign-summary article {
    min-height: 170px;
    padding: 22px;
    border-radius: 8px;
    color: #fff;
    background: #40bfa8;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.charity-campaign-summary article.is-pink {
    background: #f2387f;
}

.charity-campaign-summary h2 {
    font-size: 26px;
    margin: 0;
    color: #fff;
}

.landing-mobile-donate-cta {
    display: none;
}

.landing-section h2 {
    color: #f2387f;
    font-size: 22px;
    margin-bottom: 12px;
}

.rewards-compact {
    border: 1px solid #eef1f4;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 22px;
}

.landing-reward-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    overflow-y: auto;
    padding: 8px 2px 18px;
    max-height: 520px;
}

.rewards-compact .landing-reward-row {
    max-height: 560px;
    padding-right: 10px;
    overscroll-behavior: contain;
    scrollbar-color: rgba(64, 191, 168, 0.75) #eef3f5;
    scrollbar-width: thin;
}

.rewards-compact .landing-reward-row::-webkit-scrollbar {
    width: 9px;
}

.rewards-compact .landing-reward-row::-webkit-scrollbar-track {
    background: #eef3f5;
    border-radius: 999px;
}

.rewards-compact .landing-reward-row::-webkit-scrollbar-thumb {
    background: rgba(64, 191, 168, 0.8);
    border-radius: 999px;
}

.upgrade-impact-modal .landing-reward-row {
    max-height: 560px;
    padding-right: 10px;
    overscroll-behavior: contain;
    scrollbar-color: rgba(64, 191, 168, 0.75) #eef3f5;
    scrollbar-width: thin;
}

.upgrade-impact-modal .landing-reward-row::-webkit-scrollbar {
    width: 9px;
}

.upgrade-impact-modal .landing-reward-row::-webkit-scrollbar-track {
    background: #eef3f5;
    border-radius: 999px;
}

.upgrade-impact-modal .landing-reward-row::-webkit-scrollbar-thumb {
    background: rgba(64, 191, 168, 0.8);
    border-radius: 999px;
}

.landing-reward-ticket {
    display: grid;
    grid-template-columns: 42% minmax(0, 58%);
    min-height: 150px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 2px #e1e5ea, 0 5px 16px rgba(25, 32, 38, .08);
    background: #fff;
}

.landing-reward-ticket > div:first-child {
    background: #40bfa8;
    color: #fff;
    text-align: center;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    position: relative;
}

.landing-reward-ticket > div:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 12px;
    height: 100%;
    background:
        radial-gradient(circle at 100% 8px, #fff 0 9px, transparent 10px) top right / 12px 22px repeat-y;
}

.landing-reward-ticket > div:first-child strong {
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.landing-reward-ticket > div:first-child span {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
}

.landing-reward-ticket > div:first-child b,
.landing-reward-ticket > div:first-child small {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
}

.landing-reward-ticket > div:last-child {
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.landing-reward-ticket img {
    width: 78px;
    height: 36px;
    object-fit: contain;
}

.landing-reward-ticket div:last-child strong {
    color: #f2387f;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.landing-reward-ticket div:last-child span {
    font-size: 16px;
    color: #4a4f57;
    line-height: 1.1;
}

.landing-reward-ticket div:last-child em {
    color: #4a4f57;
    font-size: 18px;
    font-style: normal;
    line-height: 1.1;
}

.upgrade-tier {
    padding: 12px 0 20px;
    border-bottom: 1px solid #e5e9ee;
}

.upgrade-tier:last-child {
    border-bottom: 0;
}

.upgrade-tier-action {
    margin: 10px 0 0;
    text-align: center;
}

.landing-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.landing-impact-grid.count-1 {
    grid-template-columns: 1fr;
}

.landing-impact-grid.count-2 {
    grid-template-columns: 1fr 1fr;
}

.landing-impact-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

.landing-socials {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.landing-socials a {
    font-size: 26px;
    color: #40bfa8;
}

.landing-special-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.landing-special-grid article {
    text-align: center;
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(25, 32, 38, .1);
}

.landing-special-grid h3 {
    background: #40bfa8;
    color: #fff !important;
    padding: 18px;
    margin: 8px 0 18px;
    font-size: 28px;
}

.landing-special-grid b,
.landing-special-grid strong {
    display: block;
    margin: 10px 0;
}

.landing-campaign-progress {
    height: 14px;
    margin: 8px 0 18px;
    background: #e9edf2;
    border-radius: 999px;
}

.landing-campaign-progress .progress-bar {
    background: #40bfa8;
    border-radius: 999px;
}

.landing-progress-label {
    display: block;
    margin-top: 16px;
    color: #6c757d;
    font-weight: 800;
}

.landing-alliances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-height: 330px;
    overflow-y: auto;
}

.landing-alliances article {
    text-align: center;
    min-height: 140px;
}

.landing-alliances img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
}

.landing-alliances strong,
.landing-alliances span {
    display: block;
}

.charity-donation-rail {
    position: sticky;
    top: 0px;
    align-self: start;
    height: fit-content;
}

.donation-widget {
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
}

.donation-widget-head {
    background: #40bfa8;
    color: #fff;
    padding: 22px;
    text-align: center;
}

.donation-widget-head h2 {
    margin: 0;
    color: #fff;
    font-size: 28px;
}

.donation-widget form {
    padding: 24px;
    scroll-margin-top: 84px;
}

.charity-donation-disabled {
    padding: 28px 24px;
    text-align: center;
    color: #4a4f57;
}

.charity-donation-disabled i,
.charity-donation-disabled strong {
    display: block;
    color: #40bfa8;
}

.charity-donation-disabled i {
    font-size: 30px;
    margin-bottom: 8px;
}

.charity-donation-disabled strong {
    font-size: 18px;
    margin-bottom: 8px;
}

.charity-donation-disabled p {
    margin: 0;
}

.charity-verified-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 24px;
    border-color: rgba(64, 191, 168, 0.3);
    text-align: center;
}

.charity-verified-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.14);
    color: var(--h2h-teal-dark);
    font-size: 1.7rem;
}

.charity-verified-card h2 {
    margin: 0;
    color: var(--h2h-dark);
    font-size: 1.05rem;
    font-weight: 900;
}

.charity-verified-card p {
    margin: 0;
    color: #4a4f57;
    line-height: 1.45;
}

.charity-verified-card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--h2h-teal-dark);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration-color: rgba(21, 159, 140, 0.35);
}

.business-public-top-grid > .business-verified-card {
    align-self: stretch;
    height: 100%;
    margin-top: 0;
}

.donation-step {
    display: none;
}

.donation-step.is-active {
    display: block;
}

.donation-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.donation-amount-btn {
    min-height: 56px;
    border: 1px solid #40bfa8;
    background: #fff;
    color: #40bfa8;
    border-radius: 6px;
    font-weight: 800;
}

.donation-amount-btn.is-selected {
    background: #40bfa8;
    color: #fff;
}

.donation-widget .js-other-amount {
    margin-bottom: 18px;
}

.stripe-card-shell {
    min-height: 46px;
    border: 1px solid #d8dee4;
    border-radius: 6px;
    padding: 12px;
    background: #fff;
}

.donation-success-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.donation-success-card {
    background: #d8eee4;
    border: 1px solid #9ed6bf;
    border-radius: 8px;
    padding: 24px;
}

.donation-success-card h2 {
    color: #0c3d2d;
}

.donation-success-layout img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

@media (max-width: 1100px) {
    .charity-public-layout,
    .donation-success-layout {
        grid-template-columns: 1fr;
    }

    .charity-donation-rail {
        position: static;
    }

    .landing-reward-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .charity-editor-heading,
    .charity-editor-savebar {
        flex-direction: column;
        align-items: stretch;
    }

    .charity-public-banner {
        height: 210px;
    }

    .charity-public-title,
    .charity-campaign-summary {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-mobile-donate-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: -6px 0 3rem;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        border: 0;
    }

    .landing-mobile-donate-cta::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -2;
        background: conic-gradient(from 0deg, #f2387f, #ffd166, #40bfa8, #f2387f);
        animation: h2h-mobile-donate-spin 2.6s linear infinite;
    }

    .landing-mobile-donate-cta::after {
        content: "";
        position: absolute;
        inset: 2px;
        z-index: -1;
        border-radius: 4px;
        background: #40bfa8;
    }

    @keyframes h2h-mobile-donate-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .landing-special-grid,
    .landing-alliances,
    .landing-impact-grid,
    .landing-impact-grid.count-2,
    .landing-reward-row {
        grid-template-columns: 1fr;
    }

    .rewards-compact .landing-reward-row,
    .upgrade-impact-modal .landing-reward-row {
        max-height: 430px;
    }

    .landing-reward-ticket {
        grid-template-columns: 40% minmax(0, 60%);
        min-height: 150px;
    }

    .landing-reward-ticket > div:first-child strong {
        font-size: 14px;
    }

    .landing-reward-ticket > div:first-child span,
    .landing-reward-ticket > div:first-child b,
    .landing-reward-ticket > div:first-child small {
        font-size: 14px;
    }

    .landing-reward-ticket > div:last-child {
        padding: 16px 12px;
        gap: 6px;
    }

    .landing-reward-ticket img {
        width: 78px;
        height: 36px;
    }

    .landing-reward-ticket div:last-child strong {
        font-size: 18px;
    }

    .landing-reward-ticket div:last-child span,
    .landing-reward-ticket div:last-child em {
        font-size: 18px;
    }

    .donation-amount-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.business-dashboard-shell,
.business-directory-shell,
.business-rewards-shell,
.business-benefits-shell {
    background: #fff;
}

.business-dashboard-header,
.business-rewards-heading,
.business-benefits-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.business-dashboard-header h1,
.business-rewards-heading h1,
.business-benefits-hero h1 {
    color: var(--h2h-pink);
    font-size: 1.95rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.business-dashboard-header p,
.business-rewards-heading p,
.business-benefits-hero p {
    color: #4a4f55;
    margin: 0;
    max-width: 760px;
}

.business-share-profile,
.business-rewards-heading .btn,
.business-benefits-hero .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.dashboard-profile-actions {
    display: grid;
    gap: 10px;
    justify-items: stretch;
    min-width: 190px;
}

.dashboard-profile-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.business-metrics-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) repeat(2, minmax(280px, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}

.business-panel,
.business-rewards-card,
.business-benefits-card {
    border-radius: 6px;
    padding: 22px;
}

.business-panel h2,
.business-section-heading h2,
.business-rewards-card h2 {
    color: var(--h2h-pink);
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0;
}

.business-top-card {
    position: relative;
    min-height: 215px;
    overflow: hidden;
}

.business-top-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.12);
    pointer-events: none;
}

.business-metric-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.14);
    color: var(--h2h-teal-dark);
    margin-bottom: 12px;
}

.business-top-card h2 {
    color: var(--h2h-teal-dark);
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.business-summary-panel h2 {
    margin-bottom: 12px;
}

.business-data-table {
    position: relative;
    z-index: 1;
    border: 0;
}

.business-data-table div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    background: transparent;
    border-bottom: 1px solid #e3e7eb;
    padding: 9px 0;
}

.business-data-table div:nth-child(2n) {
    background: transparent;
}

.business-data-table div:last-child {
    border-bottom: 0;
}

.business-data-table strong {
    color: #4a4f55;
    font-weight: 700;
}

.business-data-table span {
    color: var(--h2h-pink);
    font-weight: 800;
}

.business-panel-heading,
.business-section-heading,
.business-rewards-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.business-panel-heading > div {
    position: relative;
    z-index: 1;
}

.business-panel-heading h2 {
    font-size: 1.2rem;
}

.business-panel-heading .form-select {
    width: 92px;
    flex: 0 0 auto;
}

.business-chart-wrap {
    position: relative;
    z-index: 1;
    height: 220px;
}

.business-info-alert {
    background: #d5efe4;
    border-color: #a7d8c7;
    color: #0d3d31;
    margin: 0 0 22px;
}

.business-table-panel {
    margin-bottom: 22px;
}

.business-table {
    min-width: 840px;
    margin-bottom: 0;
}

.business-table thead th {
    color: #000;
    font-weight: 800;
    border-bottom: 1px solid #d8dde3;
    text-align: center;
}

.business-table tbody td {
    text-align: center;
    vertical-align: middle;
    border-color: #d8dde3;
    padding: 11px 10px;
}

.business-table tbody tr:nth-child(odd) td {
    background: #f7f8f9;
}

.business-entity-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.business-entity-cell img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 5px;
}

.business-entity-cell a {
    color: var(--h2h-teal-dark);
    font-weight: 800;
}

.business-icon-action {
    color: var(--h2h-teal-dark);
    border: 0;
    padding: 4px 7px;
}

.business-icon-action:hover {
    color: var(--h2h-pink);
}

.business-status-badge {
    display: inline-flex;
    justify-content: center;
    border-radius: 999px;
    background: #fff5cf;
    color: #7d5a00;
    padding: 5px 10px;
    font-size: 0.82rem;
    font-weight: 800;
}

.business-status-badge.is-approved {
    background: rgba(64, 191, 168, 0.15);
    color: var(--h2h-teal-dark);
}

.business-status-badge.is-inactive {
    background: #eef1f4;
    color: #5e6872;
}

.business-status-badge.is-transfer {
    background: rgba(241, 61, 132, 0.12);
    color: var(--h2h-pink);
}

.business-reward-detail-hero {
    display: grid;
    grid-template-columns: minmax(420px, 1.3fr) minmax(280px, 0.7fr);
    gap: 20px;
    margin-bottom: 20px;
    padding: 22px;
}

.business-reward-detail-ticket {
    display: grid;
    grid-template-columns: 132px 1fr;
    min-height: 230px;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.business-reward-detail-ticket-body {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 22px;
}

.business-reward-detail-ticket-body h2,
.business-reward-charity-card h2 {
    color: var(--h2h-teal-dark);
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
}

.business-reward-detail-ticket-body p {
    color: #4a4f55;
    margin: 0;
}

.business-reward-detail-ticket-body dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
}

.business-reward-detail-ticket-body dt {
    color: #6c757d;
    font-weight: 700;
}

.business-reward-detail-ticket-body dd {
    color: #151b22;
    font-weight: 800;
    margin: 0;
}

.business-reward-charity-card {
    display: grid;
    align-content: start;
    gap: 14px;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    padding: 20px;
    background: linear-gradient(180deg, #fff 0%, rgba(64, 191, 168, 0.06) 100%);
}

.business-reward-charity-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    background: #fff;
}

.business-reward-charity-identity img {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
}

.business-reward-charity-identity strong,
.business-reward-charity-identity span {
    display: block;
}

.business-reward-charity-identity strong {
    color: var(--h2h-pink);
    font-size: 1.05rem;
}

.business-reward-charity-identity span {
    color: #5e6872;
}

.business-reward-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.business-reward-stat {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 20px;
}

.business-reward-stat::after {
    content: "";
    position: absolute;
    right: -26px;
    bottom: -34px;
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.12);
}

.business-reward-stat strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--h2h-pink);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 8px;
}

.business-reward-stat span:last-child {
    position: relative;
    z-index: 1;
    color: #4a4f55;
    font-weight: 800;
}

.business-reward-coupon-history p {
    color: #4a4f55;
    margin: 0 0 14px;
}

.business-rewards-toolbar {
    align-items: stretch;
}

.business-rewards-toolbar .form-control {
    max-width: 360px;
}

.business-reward-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 18px;
}

.business-coupon-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: 1fr auto;
    min-height: 250px;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 18px rgba(21, 27, 34, 0.08);
}

.business-coupon-value {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 14px 8px;
    background: var(--h2h-teal);
    color: #fff;
    text-align: center;
}

.business-coupon-value::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background:
        radial-gradient(circle at 6px 6px, transparent 6px, var(--h2h-teal) 6.5px) 0 0 / 12px 14px;
}

.business-coupon-value strong {
    font-size: 1.8rem;
    line-height: 1;
}

.business-coupon-value span,
.business-coupon-value i {
    font-weight: 800;
}

.business-coupon-body {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.business-coupon-body img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.business-coupon-body h2 {
    color: var(--h2h-pink);
    font-size: 1.08rem;
}

.business-coupon-body p {
    color: #4a4f55;
    margin: 0;
}

.business-coupon-body dl {
    display: grid;
    gap: 5px;
    margin: 0;
}

.business-coupon-body dl div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.business-coupon-body dt {
    color: #6c757d;
    font-weight: 700;
}

.business-coupon-body dd {
    margin: 0;
    font-weight: 800;
}

.business-coupon-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #e3e7eb;
    padding: 10px;
}

.charity-icon-action.is-favorite {
    color: var(--h2h-pink);
}

.business-reward-builder {
    margin-top: 28px;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    padding: 28px;
    background: #fff;
}

.business-reward-builder-heading {
    text-align: center;
    margin-bottom: 24px;
}

.business-reward-builder-heading h2 {
    color: var(--h2h-teal);
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 8px;
}

.business-reward-builder-heading p {
    color: #4a4f55;
    margin: 0 auto;
    max-width: 780px;
}

.business-reward-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 32px;
    align-items: start;
}

.business-reward-form-card {
    border-radius: 6px;
    padding: 24px;
}

.business-reward-instructions {
    background: rgba(64, 191, 168, 0.08);
    border: 1px solid rgba(64, 191, 168, 0.18);
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 16px;
}

.business-reward-form .form-label {
    color: #27313a;
    font-weight: 800;
}

.business-reward-form .form-text {
    color: #5e6872;
    font-size: 0.86rem;
}

.business-reward-currency-note {
    color: #5e6872;
    font-size: 0.92rem;
    margin: 14px 0 0;
    text-align: center;
}

.business-reward-preview-panel {
    position: sticky;
    top: 92px;
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 28px 10px;
}

.business-reward-preview-panel h3 {
    color: #222831;
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0;
}

.business-reward-live-coupon {
    display: grid;
    grid-template-columns: 160px minmax(190px, 1fr);
    width: min(100%, 430px);
    min-height: 170px;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 18px rgba(21, 27, 34, 0.08);
}

.business-reward-live-value {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 16px 10px;
    background: var(--h2h-teal);
    color: #fff;
    text-align: center;
}

.business-reward-live-value::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background:
        radial-gradient(circle at 6px 6px, transparent 6px, var(--h2h-teal) 6.5px) 0 0 / 12px 14px;
}

.business-reward-live-value strong {
    font-size: 2rem;
    line-height: 1;
}

.business-reward-live-value span {
    font-size: 1rem;
    font-weight: 800;
}

.business-reward-live-value i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--h2h-pink);
    font-size: 1.3rem;
}

.business-reward-live-value small {
    display: block;
    font-weight: 800;
    line-height: 1.25;
}

.business-reward-live-body {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px 20px;
    text-align: center;
}

.business-reward-live-body img {
    width: 72px;
    max-height: 46px;
    object-fit: contain;
}

.business-reward-live-body strong {
    color: var(--h2h-pink);
    font-size: 1.12rem;
    font-weight: 800;
}

.business-reward-live-body span,
.business-reward-live-body small {
    color: #333941;
    line-height: 1.35;
}

.business-reward-live-body small {
    color: #69717a;
    font-weight: 800;
    text-transform: uppercase;
}

.business-secure-codes-help {
    color: #27313a;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.business-secure-codes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.business-secure-code-modal .modal-header {
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}

.business-secure-code-modal .modal-header .btn-close {
    position: absolute;
    right: 18px;
    top: 18px;
}

.business-secure-code-modal .modal-title {
    color: #222831;
    font-size: 2rem;
    font-weight: 500;
}

.business-secure-code-modal .modal-header p {
    margin: 6px 0 0;
}

.business-benefits-hero {
    align-items: center;
}

.business-benefits-card {
    background: linear-gradient(135deg, rgba(64, 191, 168, 0.12), #fff 70%);
    border-color: rgba(64, 191, 168, 0.24);
}

.business-benefits-content {
    color: #28323b;
    font-size: 1.03rem;
    line-height: 1.7;
}

.business-benefits-content h1,
.business-benefits-content h2,
.business-benefits-content h3 {
    color: var(--h2h-pink);
    font-weight: 800;
}

.business-benefits-content a {
    color: var(--h2h-teal-dark);
    font-weight: 800;
}

@media (max-width: 992px) {
    .business-metrics-grid,
    .business-reward-grid,
    .business-reward-detail-hero,
    .business-reward-builder-grid {
        grid-template-columns: 1fr;
    }

    .business-reward-detail-stats {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .business-reward-preview-panel {
        position: static;
        padding-top: 8px;
    }
}

@media (max-width: 768px) {
    .business-dashboard-header,
    .business-rewards-heading,
    .business-benefits-hero,
    .business-panel-heading,
    .business-section-heading,
    .business-rewards-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .business-share-profile,
    .business-rewards-heading .btn,
    .business-benefits-hero .btn,
    .business-section-heading .btn {
        width: 100%;
    }

    .business-secure-codes-actions {
        width: 100%;
    }

    .business-rewards-toolbar .form-control {
        max-width: none;
    }

    .business-coupon-card {
        grid-template-columns: 104px 1fr;
    }

    .business-reward-detail-ticket {
        grid-template-columns: 112px 1fr;
    }

    .business-reward-detail-ticket-body dl,
    .business-reward-detail-stats {
        grid-template-columns: 1fr;
    }

    .business-coupon-actions {
        flex-direction: column;
    }

    .business-reward-builder {
        padding: 18px;
    }

    .business-reward-builder-heading h2 {
        font-size: 1.55rem;
    }

    .business-reward-live-coupon {
        grid-template-columns: 128px minmax(0, 1fr);
    }

    .business-reward-live-value strong {
        font-size: 1.55rem;
    }
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--h2h-dark);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

a {
    color: var(--h2h-teal);
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover,
a:focus {
    color: var(--h2h-teal-dark);
}

.btn-link {
    color: var(--h2h-teal);
    text-decoration-color: rgba(64, 191, 168, 0.45);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--h2h-teal-dark);
    text-decoration-color: var(--h2h-teal-dark);
}

.h2h-logo {
    font-weight: 800;
    color: var(--h2h-teal) !important;
    font-size: 1.6rem;
    text-decoration: none;
}

.h2h-logo span {
    color: var(--h2h-pink);
}

.h2h-navbar .nav-link {
    color: var(--h2h-teal-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 1.1rem;
}

.h2h-navbar .nav-link:hover {
    color: var(--h2h-pink);
}

.h2h-navbar-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.donor-nav-menu {
    gap: 22px;
}

.donor-nav-menu .nav-link {
    color: var(--h2h-teal-dark);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.donor-avatar-button {
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
}

.donor-avatar-button img,
.donor-avatar-button span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.donor-avatar-button img {
    object-fit: cover;
}

.donor-avatar-button span {
    display: grid;
    place-items: center;
    background: var(--h2h-teal);
    color: #fff;
    font-weight: 800;
}

.donor-account-dropdown .dropdown-menu {
    min-width: 190px;
}

.btn-h2h-primary {
    background-color: var(--h2h-teal);
    color: #ffffff;
    border: 1px solid var(--h2h-teal);
    font-weight: 600;
}

.btn-h2h-primary:hover {
    background-color: var(--h2h-teal-dark);
    color: #ffffff;
}

.btn-h2h-outline {
    color: var(--h2h-teal-dark);
    border: 1px solid var(--h2h-teal);
    background-color: transparent;
    font-weight: 600;
}

.btn-h2h-outline:hover {
    background-color: var(--h2h-teal);
    color: #ffffff;
}

.btn-h2h-pink {
    background-color: var(--h2h-pink);
    color: #ffffff;
    border: 1px solid var(--h2h-pink);
    font-weight: 600;
    min-width: 180px;
}

.btn-h2h-pink:hover {
    background-color: #d92769;
    color: #ffffff;
}

.h2h-hero {
    background-color: var(--h2h-teal);
    color: #ffffff;
    padding: 90px 0;
    text-align: center;
}

.h2h-hero h1 {
    font-size: 2.8rem;
    font-weight: 800;
}

.h2h-hero .rich-content,
.h2h-hero .rich-content p {
    color: #ffffff;
}

.h2h-section {
    padding: 20px 0;
}

.h2h-section-title {
    color: var(--h2h-pink);
    font-weight: 800;
    margin-bottom: 25px;
}

.h2h-section-description {
    color: #4a4f55;
    margin: -10px auto 30px;
    max-width: 760px;
}

.rich-content {
    color: var(--h2h-dark);
    line-height: 1.55;
}

.rich-content p:last-child,
.rich-content ul:last-child,
.rich-content ol:last-child {
    margin-bottom: 0;
}

.rich-content h1,
.rich-content h2,
.rich-content h3 {
    color: var(--h2h-pink);
    font-weight: 800;
    margin: 1.4rem 0 0.75rem;
}

.rich-content img {
    border-radius: 8px;
    height: auto;
    max-width: 100%;
}

.public-rich-page {
    padding: 42px 0 70px;
}

.public-rich-content {
    font-size: 1.18rem;
    margin: 0 auto;
    max-width: 1120px;
}

.public-rich-subtitle {
    margin-top: 58px;
}

.public-rich-image {
    margin-top: 34px;
}

.public-rich-image img {
    max-height: 420px;
    object-fit: contain;
}

.public-about-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 42px auto 0;
    max-width: 1120px;
}

.public-about-images img {
    width: 100%;
    height: 360px;
    object-fit: contain;
}

.legal-page .public-rich-content {
    font-size: 1rem;
    max-width: 920px;
}

.charities-browser-shell {
    background: #fff;
}

.business-browser-shell {
    background: #fff;
}

.charities-browser-container {
    max-width: 1400px;
    padding-left: 34px;
    padding-right: 34px;
}

.charities-browser-title {
    color: var(--h2h-teal);
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 24px;
}

.charity-directory-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 20px;
}

.charity-directory-heading .charities-browser-title {
    margin-bottom: 6px;
}

.charity-directory-heading p {
    color: #4a4f55;
    margin: 0;
}

.charities-browser-card {
    border-radius: 6px;
    padding: 24px;
}

.charities-browser-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
}

.charities-search-wrap {
    flex: 1 1 640px;
    max-width: 640px;
}

.charities-view-toggle {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

.charities-view-toggle .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.charities-view-toggle .btn:not(.is-active) {
    opacity: 0.92;
}

.charities-table {
    margin-bottom: 0;
    min-width: 820px;
}

.charities-table thead th {
    background: #f7f7f7;
    color: #000;
    border-bottom: 1px solid #c7ccd1;
    font-weight: 800;
}

.charities-table tbody td {
    border-color: #d8dde3;
    padding: 10px 8px;
}

.charities-table tbody tr:nth-child(odd) td {
    background: #f0f0f0;
}

.charity-list-name {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.charity-list-name img {
    width: 46px;
    height: 56px;
    object-fit: cover;
}

.charity-list-name a {
    color: var(--h2h-teal-dark);
    font-weight: 700;
    text-decoration: underline;
}

.charity-icon-action {
    color: var(--h2h-teal);
    border: 0;
    padding: 5px 9px;
}

.charity-icon-action:hover {
    color: var(--h2h-pink);
}

.charities-donate-btn {
    min-width: 134px;
}

.business-view-btn {
    min-width: 86px;
}

.charities-grid-view {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 24px;
}

.charity-grid-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 210px;
    padding: 10px;
    border: 1px solid #f0f1f2;
    border-radius: 6px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.charity-grid-card img {
    width: 48px;
    height: 58px;
    object-fit: cover;
}

.charity-grid-card h2 {
    color: var(--h2h-dark);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.charity-grid-card p {
    margin: 0;
}

.charity-grid-actions {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.charity-grid-card .btn-h2h-primary {
    width: 100%;
    align-self: end;
}

.business-grid-card {
    min-height: 230px;
}

.business-category-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(64, 191, 168, 0.12);
    color: var(--h2h-teal-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

.charity-grid-description {
    color: #4a4f55;
    min-height: 38px;
}

.charity-placeholder-card {
    border-radius: 6px;
    max-width: 900px;
}

.charity-placeholder-card h1 {
    color: var(--h2h-pink);
    margin-bottom: 10px;
}

.charity-placeholder-card p {
    color: #4a4f55;
    max-width: 760px;
    margin-bottom: 22px;
}

.rewards-browser-shell {
    background: #fff;
}

.rewards-browser-container {
    max-width: 1400px;
    padding-left: 34px;
    padding-right: 34px;
}

.rewards-page-heading {
    margin-bottom: 22px;
    text-align: center;
}

.rewards-page-heading h1 {
    color: var(--h2h-pink);
    font-size: 2.35rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.rewards-page-heading p {
    color: #222831;
    margin: 0;
}

.rewards-browser-card {
    border-radius: 6px;
    padding: 34px 24px 28px;
}

.rewards-business-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 18px;
    margin-bottom: 34px;
}

.rewards-scroll-btn {
    width: 56px;
    height: 56px;
    border: 0;
    background: #f8f9fa;
    color: #000;
    font-size: 1.75rem;
}

.rewards-scroll-btn:hover {
    color: var(--h2h-pink);
    background: #f1f3f5;
}

.rewards-business-strip {
    display: flex;
    justify-content: center;
    gap: 18px;
    overflow-x: auto;
    padding: 4px;
    scroll-behavior: smooth;
}

.rewards-business-strip::-webkit-scrollbar {
    height: 8px;
}

.rewards-business-strip::-webkit-scrollbar-thumb {
    background: rgba(64, 191, 168, 0.65);
    border-radius: 999px;
}

.rewards-business-chip {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 92px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #222831;
    padding: 8px;
}

.rewards-business-chip img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
}

.rewards-business-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.14);
    color: var(--h2h-teal-dark);
    font-size: 1.35rem;
}

.rewards-business-chip span {
    font-size: 0.78rem;
    font-weight: 700;
}

.rewards-business-chip.is-active {
    background: rgba(64, 191, 168, 0.12);
    box-shadow: inset 0 0 0 2px rgba(64, 191, 168, 0.35);
}

.rewards-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.rewards-filter-label {
    color: var(--h2h-muted);
    font-weight: 700;
    margin: 0;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 16px 24px;
}

.reward-ticket {
    display: grid;
    grid-template-columns: 145px 1fr;
    min-height: 160px;
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reward-ticket:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.reward-ticket-value {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 7px;
    background: var(--h2h-teal);
    color: #fff;
    padding: 18px 12px;
    text-align: center;
}

.reward-ticket-value::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background:
        radial-gradient(circle at 6px 6px, transparent 6px, var(--h2h-teal) 6.5px) 0 0 / 12px 14px;
}

.reward-ticket-value strong {
    font-size: 2rem;
    line-height: 1;
}

.reward-ticket-value span {
    font-weight: 800;
}

.reward-ticket-value i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: var(--h2h-pink);
    font-size: 1rem;
}

.reward-ticket-info {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 14px 18px;
    text-align: center;
}

.reward-ticket-info img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.reward-ticket-info strong {
    color: var(--h2h-pink);
    font-size: 1.2rem;
    line-height: 1.2;
}

.reward-ticket-info small {
    color: var(--h2h-muted);
    font-weight: 700;
}

.reward-table-business {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.reward-table-business img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.rewards-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.charities-no-results {
    color: var(--h2h-muted);
    margin: 18px 0 0;
    text-align: center;
}

.h2h-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.h2h-card h3 {
    color: var(--h2h-pink);
    font-weight: 800;
}

.h2h-faq-title {
    color: var(--h2h-teal-dark);
}

.h2h-faqs .accordion {
    --bs-accordion-active-bg: rgba(64, 191, 168, 0.18);
    --bs-accordion-active-color: var(--h2h-teal-dark);
    --bs-accordion-btn-focus-border-color: var(--h2h-teal);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(64, 191, 168, 0.25);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23159f8c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23159f8c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.h2h-faqs .accordion-button {
    color: var(--h2h-dark);
}

.h2h-faqs .accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 rgba(64, 191, 168, 0.28);
}

.platform-faq-card .accordion {
    --bs-accordion-active-bg: rgba(64, 191, 168, 0.18);
    --bs-accordion-active-color: var(--h2h-teal-dark);
    --bs-accordion-btn-focus-border-color: var(--h2h-teal);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(64, 191, 168, 0.25);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23159f8c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23159f8c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.platform-faq-card .accordion-button {
    color: var(--h2h-dark);
}

.platform-faq-card .accordion-button:not(.collapsed) {
    background: rgba(64, 191, 168, 0.18);
    color: var(--h2h-teal-dark);
    box-shadow: inset 0 -1px 0 rgba(64, 191, 168, 0.28);
}

.h2h-cta {
    background-color: var(--h2h-teal);
    color: #ffffff;
    padding: 60px 0;
}

.h2h-cta h2 {
    font-weight: 800;
}

.h2h-footer {
    padding: 55px 0;
    background-color: #ffffff;
}

.h2h-footer p {
    color: var(--h2h-muted);
}

.h2h-footer a {
    color: var(--h2h-teal-dark);
    font-size: 0.9rem;
}

.portal-footer {
    background: #fff;
    border-top: 1px solid #dfe4ea;
    padding: 18px 0;
}

.portal-footer-inner {
    max-width: 1380px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-left: 28px;
    padding-right: 28px;
}

.portal-footer-brand {
    display: flex;
    align-items: center;
    gap: 22px;
    color: #222831;
    font-weight: 600;
}

.portal-footer-logo {
    display: inline-block;
    font-size: 1.35rem;
    line-height: 1;
}

.portal-footer-version {
    color: var(--h2h-muted);
    font-size: 0.9rem;
}

.portal-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.support-request-modal .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(34, 40, 49, 0.18);
}

.support-request-modal .modal-header,
.support-request-modal .modal-footer {
    border-color: #dfe4ea;
}

.support-request-modal .modal-title {
    color: var(--h2h-dark);
    font-weight: 800;
}

.support-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--h2h-teal-dark);
    font-weight: 700;
    text-decoration: none;
}

.support-faq-link:hover {
    color: var(--h2h-pink);
}

.auth-shell {
    min-height: 72vh;
    background: #f6f7f8;
    border-top: 1px solid #dfe4ea;
    padding: 0 0 48px;
}

.auth-logo {
    display: block;
    width: max-content;
    margin: 0 auto;
    padding: 10px 0 18px;
    font-size: 2rem;
}

.auth-grid {
    align-items: stretch;
    padding-top: 28px;
}

.auth-grid > [class*="col-"] {
    display: flex;
}

.auth-info-card,
.auth-form-card {
    border-radius: 8px;
    min-height: 500px;
    width: 100%;
}

.auth-info-card h1,
.portal-shell h1 {
    color: var(--h2h-teal);
    font-size: 2rem;
    font-weight: 800;
}

.auth-info-card h1 span,
.portal-shell h1 span {
    color: var(--h2h-pink);
}

.auth-info-card h3,
.auth-form-card h2,
.portal-title {
    color: var(--h2h-pink);
    font-weight: 800;
}

.auth-info-card h3,
.portal-title {
    color: var(--h2h-teal);
}

.auth-form-card {
    padding: 42px;
}

.auth-form-card a,
.auth-tagline {
    color: var(--h2h-teal-dark);
}

.google-btn {
    display: block;
    margin: 24px auto 8px;
    border: 1px solid #427af4;
    background: #427af4;
    color: #fff;
    font-weight: 700;
    padding: 8px 16px;
}

.google-btn strong {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -8px 10px -8px -16px;
    background: #fff;
    color: #4285f4;
}

.auth-separator {
    border-top: 1px solid #d8dde3;
    text-align: center;
    margin: 14px 0;
}

.auth-separator span {
    position: relative;
    top: -12px;
    background: #fff;
    padding: 0 10px;
    color: #555;
    font-weight: 700;
}

.auth-tagline {
    margin: 60px 0 0;
    text-align: center;
    color: #222;
    font-style: italic;
}

.auth-narrow {
    max-width: 620px;
    padding-top: 44px;
}

.password-meter {
    height: 8px;
    background: #edf0f2;
    border-radius: 999px;
    overflow: hidden;
}

.password-meter span {
    display: block;
    height: 100%;
    width: 0;
    transition: width 0.2s ease;
}

.password-meter .weak { background: #dc3545; }
.password-meter .medium { background: #f0ad4e; }
.password-meter .strong { background: var(--h2h-teal); }
.password-hint { color: #6c757d; }

.portal-shell {
    background: #fff;
    padding: 34px 0 70px;
}

.portal-container {
    max-width: 980px;
}

.portal-wide {
    max-width: 1250px;
}

.portal-lead {
    max-width: 860px;
    margin: 0 auto;
    font-size: 1.15rem;
    font-weight: 700;
}

.wizard-card {
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 60px 34px;
}

.wizard-steps {
    display: flex;
    justify-content: center;
    gap: 62px;
    margin-bottom: 36px;
}

.wizard-steps div {
    display: grid;
    gap: 8px;
    justify-items: center;
    color: #222;
}

.wizard-steps span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dedede;
    color: #fff;
    font-weight: 800;
}

.wizard-steps span i {
    font-size: 1rem;
    line-height: 1;
}

.wizard-steps .is-active span { background: var(--h2h-pink); }
.wizard-steps .is-complete span { background: var(--h2h-teal); }

.role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.role-card {
    min-height: 150px;
    border: 2px solid #d1d1d1;
    display: grid;
    place-items: center;
    text-align: center;
    cursor: pointer;
    padding: 20px;
}

.role-card input {
    position: absolute;
    opacity: 0;
}

.role-card:has(input:checked) {
    border-color: var(--h2h-pink);
    box-shadow: inset 0 0 0 2px rgba(242, 56, 127, 0.2);
}

.role-icon {
    font-size: 2rem;
}

.profile-card {
    border-radius: 6px;
    background: #f8f9fa;
    padding: 28px;
}

.profile-card h2 {
    font-size: 1.25rem;
    font-weight: 800;
}

.profile-card label {
    font-weight: 800;
}

.portal-alert {
    background: var(--h2h-teal);
    color: #fff;
    border-radius: 4px;
    padding: 22px 28px;
    margin: 26px 0;
}

.portal-alert h2 {
    color: #fff;
    font-weight: 800;
}

.top-steps {
    margin-top: 10px;
}

.dashboard-card {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.donor-dashboard-shell {
    background: #fff;
}

.donor-public-landing {
    background: #fbfcfd;
}

.donor-public-container {
    max-width: 1260px;
    padding: 28px 20px 54px;
}

.donor-public-banner {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    background: #e8f8f5;
}

.donor-public-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
    gap: 22px;
    align-items: start;
    margin-bottom: 24px;
}

.donor-public-profile,
.donor-public-data,
.donor-public-donations {
    border-radius: 8px;
    padding: 24px;
}

.donor-public-profile {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 360px;
    text-align: center;
}

.donor-public-kicker {
    margin: 0;
    color: var(--h2h-dark);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 900;
    line-height: 1.1;
}

.donor-public-kicker > span {
    color: var(--h2h-teal);
}

.donor-public-kicker > span span {
    color: var(--h2h-pink);
}

.donor-public-avatar {
    width: 154px;
    height: 154px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid rgba(64, 191, 168, 0.16);
}

.donor-public-profile h1 {
    margin: 0;
    color: var(--h2h-teal);
    font-size: 1.75rem;
    font-weight: 900;
}

.donor-public-location {
    margin: 0 0 12px;
    color: #343a40;
}

.donor-public-share {
    min-width: 280px;
    border-color: var(--h2h-pink);
    color: var(--h2h-pink);
}

.donor-public-share:hover {
    background: var(--h2h-pink);
    border-color: var(--h2h-pink);
    color: #fff;
}

.donor-public-data {
    position: relative;
    overflow: hidden;
}

.donor-public-data::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.12);
    pointer-events: none;
}

.donor-public-data h2,
.donor-public-donations h2 {
    color: var(--h2h-pink);
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.donor-public-data .donor-data-table {
    position: relative;
    z-index: 1;
}

.donor-public-donations {
    margin-bottom: 22px;
}

.charity-dashboard-shell {
    background: #fff;
}

.charity-special-campaign-shell {
    background: #fff;
}

.platform-faq-shell {
    background: #fff;
}

.platform-faq-card {
    padding: 22px;
}

.donor-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.charity-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.charity-dashboard-header h1 {
    color: var(--h2h-pink);
    font-size: 1.85rem;
    margin-bottom: 6px;
}

.charity-dashboard-header p {
    color: #4a4f55;
    margin: 0;
}

.charity-share-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.donor-dashboard-header h1 {
    color: var(--h2h-pink);
    font-size: 1.85rem;
    margin-bottom: 6px;
}

.donor-dashboard-header p {
    color: #4a4f55;
    margin: 0;
}

.donor-share-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.donor-metrics-grid {
    display: grid;
    grid-template-columns: minmax(270px, 1fr) repeat(2, minmax(280px, 1.1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.charity-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr)) minmax(300px, 1.25fr);
    gap: 18px;
    margin-bottom: 22px;
}

.donor-panel {
    border-radius: 6px;
    padding: 22px;
}

.charity-panel {
    border-radius: 6px;
    padding: 22px;
}

.charity-panel h2,
.charity-section-heading h2 {
    color: var(--h2h-pink);
    font-size: 1.28rem;
    font-weight: 800;
    margin: 0;
}

.charity-metric-card {
    position: relative;
    min-height: 215px;
    overflow: hidden;
}

.charity-metric-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.12);
}

.charity-metric-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.14);
    color: var(--h2h-teal-dark);
    margin-bottom: 12px;
}

.charity-metric-card h2 {
    color: var(--h2h-teal-dark);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.charity-metric-card p {
    color: #4a4f55;
    margin-bottom: 4px;
}

.charity-metric-card strong {
    display: block;
    color: var(--h2h-pink);
    font-size: 1.75rem;
    line-height: 1.1;
    margin-bottom: 18px;
}

.charity-metric-card small {
    display: block;
    border-top: 1px solid #e3e7eb;
    color: #4a4f55;
    padding-top: 12px;
}

.charity-metric-card small b {
    color: var(--h2h-pink);
    font-size: 1.08rem;
}

.charity-panel-heading,
.charity-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.charity-section-heading p {
    color: #4a4f55;
    margin: 5px 0 0;
}

.charity-panel-heading .form-select {
    width: 92px;
    flex: 0 0 auto;
}

.charity-chart-panel h2 {
    font-size: 1.05rem;
}

.charity-chart-wrap {
    position: relative;
    height: 174px;
}

.charity-landing-card,
.charity-share-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
}

.charity-landing-card {
    background: linear-gradient(135deg, rgba(64, 191, 168, 0.14), #ffffff 72%);
    border-color: rgba(64, 191, 168, 0.32);
}

.charity-share-card {
    background: linear-gradient(135deg, rgba(242, 56, 127, 0.08), #ffffff 74%);
    border-color: rgba(242, 56, 127, 0.2);
}

.charity-kicker {
    display: inline-flex;
    align-items: center;
    color: var(--h2h-teal-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.charity-landing-card p,
.charity-share-card p {
    color: #4a4f55;
    margin: 9px 0 0;
    max-width: 760px;
}

.charity-status-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--h2h-pink);
    font-weight: 800;
    margin-top: 14px;
}

.charity-landing-actions {
    display: grid;
    gap: 10px;
    min-width: 210px;
}

.charity-landing-actions .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.charity-download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 1fr));
    gap: 12px;
    min-width: 390px;
}

.charity-download-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    background: #fff;
    color: var(--h2h-teal-dark);
    font-weight: 800;
    padding: 12px;
    text-decoration: none;
}

.charity-download-grid a:hover {
    border-color: var(--h2h-pink);
    color: var(--h2h-pink);
}

.charity-download-grid a.is-disabled {
    color: #9aa3aa;
    cursor: not-allowed;
    opacity: 0.58;
    pointer-events: none;
}

.charity-download-grid a.is-disabled i {
    background: #eef1f4;
}

.charity-download-grid i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.14);
}

.donor-panel h2,
.donor-section-heading h2 {
    color: var(--h2h-pink);
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0;
}

.donor-metric-card {
    position: relative;
    min-height: 215px;
    overflow: hidden;
}

.donor-metric-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.12);
    pointer-events: none;
}

.donor-metric-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.14);
    color: var(--h2h-teal-dark);
    margin-bottom: 12px;
}

.donor-metric-card h2 {
    color: var(--h2h-teal-dark);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.donor-summary-panel h2 {
    margin-bottom: 12px;
}

.donor-data-table {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0;
    margin-bottom: 10px;
}

.donor-data-table div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    border-top: 1px solid #e3e7eb;
    padding: 10px 0;
    color: #4a4f55;
    font-size: 0.95rem;
}

.donor-data-table div:first-child {
    border-top: 0;
    padding-top: 0;
}

.donor-data-table strong {
    font-weight: 500;
}

.donor-data-table span {
    color: var(--h2h-pink);
    font-size: 1.05rem;
    font-weight: 800;
}

.donor-summary-panel .small {
    position: relative;
    z-index: 1;
}

.donor-panel-heading,
.donor-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.donor-panel-heading h2 {
    font-size: 1.1rem;
}

.donor-metric-card .donor-panel-heading {
    position: relative;
    z-index: 1;
    align-items: flex-start;
}

.donor-panel-heading .form-select {
    width: 92px;
    flex: 0 0 auto;
}

.donor-chart-wrap {
    position: relative;
    z-index: 1;
    height: 220px;
}

.donor-coupon-section {
    margin-bottom: 22px;
}

.my-coupons-shell {
    background: #fff;
}

.my-coupons-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
}

.my-coupons-heading h1 {
    color: var(--h2h-pink);
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.my-coupons-heading p {
    color: #4a4f55;
    margin: 0;
}

.my-coupons-card {
    border-radius: 6px;
}

.my-coupons-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.my-coupons-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.my-coupons-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.my-coupon-card {
    min-height: 0;
}

.my-coupon-card .h2h-coupon-info small {
    color: var(--h2h-muted);
    font-weight: 800;
    margin-top: 4px;
}

.my-coupon-card .h2h-coupon-actions {
    grid-template-columns: 1fr;
}

.my-coupon-card-history {
    filter: grayscale(0.18);
    opacity: 0.82;
}

.my-coupon-card-history .h2h-coupon-value {
    background: #8c98a4;
}

.my-coupon-card-history .h2h-coupon-value::after {
    background:
        radial-gradient(circle at 6px 6px, transparent 6px, #8c98a4 6.5px) 0 0 / 12px 14px;
}

.my-coupon-status-badge {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 7px 10px;
    border-radius: 4px;
    background: #eef2f5;
    color: #4a4f55;
    font-weight: 800;
}

.coupon-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 250px;
    gap: 18px;
    overflow-x: auto;
    padding: 2px 2px 14px;
    scroll-snap-type: x proximity;
}

.coupon-strip::-webkit-scrollbar {
    height: 10px;
}

.coupon-strip::-webkit-scrollbar-thumb {
    background: rgba(64, 191, 168, 0.7);
    border-radius: 999px;
}

.h2h-coupon-card {
    display: grid;
    grid-template-columns: 104px 1fr;
    grid-template-rows: 1fr auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    scroll-snap-align: start;
}

.h2h-coupon-value {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--h2h-teal);
    color: #fff;
    text-align: center;
    font-weight: 800;
}

.h2h-coupon-value::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background:
        radial-gradient(circle at 6px 6px, transparent 6px, var(--h2h-teal) 6.5px) 0 0 / 12px 14px;
}

.h2h-coupon-value strong {
    font-size: 1.55rem;
    line-height: 1;
}

.h2h-coupon-value span {
    font-size: 0.82rem;
}

.h2h-coupon-info {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 10px 10px;
    text-align: center;
    color: #4a4f55;
}

.h2h-coupon-info img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    margin-bottom: 6px;
}

.h2h-coupon-info strong {
    color: var(--h2h-pink);
    font-size: 0.95rem;
    line-height: 1.2;
    margin-bottom: 6px;
}

.h2h-coupon-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #e3e7eb;
    background: #fff;
}

.h2h-coupon-actions .btn {
    min-width: 0;
    width: 100%;
    font-size: 0.78rem;
    padding-top: 5px;
    padding-bottom: 5px;
    white-space: normal;
}

.donor-table-panel {
    margin-bottom: 22px;
}

.charity-table-panel {
    margin-bottom: 22px;
}

.charity-table-panel > h2 {
    margin-bottom: 12px;
}

.charity-table {
    min-width: 760px;
    margin-bottom: 0;
}

.charity-table thead th {
    color: #000;
    font-weight: 800;
    border-bottom: 1px solid #d8dde3;
    text-align: center;
}

.charity-table tbody td {
    text-align: center;
    vertical-align: middle;
    border-color: #d8dde3;
    padding: 11px 10px;
}

.charity-table tbody tr:nth-child(odd) td {
    background: #f7f8f9;
}

.charity-entity-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 155px;
    text-align: left;
}

.charity-entity-cell img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.charity-icon-action {
    color: var(--h2h-teal);
    border: 0;
    padding: 5px 7px;
}

.charity-icon-action:hover,
.charity-inline-action:hover {
    color: var(--h2h-pink);
}

.charity-icon-action.is-danger {
    color: var(--h2h-pink);
}

.charity-icon-action.is-selected {
    color: var(--h2h-pink);
    opacity: 0.85;
}

.charity-status-badge {
    display: inline-flex;
    justify-content: center;
    min-width: 82px;
    border-radius: 999px;
    background: #eef2f5;
    color: #4a4f55;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 5px 9px;
}

.charity-status-badge.is-active {
    background: rgba(64, 191, 168, 0.14);
    color: var(--h2h-teal-dark);
}

.charity-status-badge.is-rejected {
    background: rgba(242, 56, 127, 0.12);
    color: var(--h2h-pink);
}

.charity-history-link {
    display: block;
    width: max-content;
    color: var(--h2h-teal-dark);
    font-weight: 700;
    margin: 14px 0 0 auto;
}

.charity-rewards-info-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #4a4f55;
    margin: 12px 0 18px;
}

.charity-rewards-info-link span {
    font-weight: 700;
}

.charity-rewards-info-page,
.internal-page-card {
    max-width: 920px;
    margin: 0 auto;
}

.charity-rewards-info-page .rich-content,
.internal-page-card .rich-content {
    color: #222831;
    font-size: 1.02rem;
    line-height: 1.6;
}

.charity-rewards-info-page .rich-content > :last-child,
.internal-page-card .rich-content > :last-child {
    margin-bottom: 0;
}

.charity-inline-action {
    color: var(--h2h-pink);
    font-weight: 700;
}

.charity-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.charity-special-form-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(340px, 1.2fr);
    gap: 28px;
    align-items: start;
}

.charity-special-copy h1 {
    color: var(--h2h-teal-dark);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.charity-special-copy .rich-content {
    color: #222831;
    font-size: 1.02rem;
    line-height: 1.55;
}

.charity-special-form-card {
    max-width: 720px;
    width: 100%;
}

.charity-special-form-card h2 {
    color: #222831;
    margin-bottom: 12px;
}

.charity-special-form-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.charity-donor-detail-shell {
    background: #fff;
}

.charity-donor-detail-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.75fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
}

.charity-donor-info-card {
    position: sticky;
    top: 92px;
}

.charity-donor-info-card img {
    display: block;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    border: 4px solid rgba(64, 191, 168, 0.16);
}

.charity-donor-info-card h2 {
    color: var(--h2h-teal-dark);
    text-align: center;
    margin-bottom: 18px;
}

.charity-donor-info-card dl {
    margin: 0 0 20px;
}

.charity-donor-info-card dl div {
    border-bottom: 1px solid #e6eaee;
    padding: 10px 0;
}

.charity-donor-info-card dt {
    color: #6c757d;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.charity-donor-info-card dd {
    color: #222831;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.charity-donor-donations-card {
    min-height: 420px;
}

.charity-onboarding-shell {
    background: #fff;
}

.charity-onboarding-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 24px;
    border-radius: 6px;
    background: var(--h2h-teal);
    color: #fff;
    box-shadow: 0 10px 24px rgba(64, 191, 168, 0.22);
}

.charity-onboarding-status.is-review {
    background: #43b9ad;
}

.charity-onboarding-status.is-landing {
    background: #2f9f91;
}

.charity-onboarding-status.is-profile,
.charity-onboarding-status.is-stripe {
    background: var(--h2h-teal);
}

.charity-onboarding-status .charity-kicker,
.charity-onboarding-status h2,
.charity-onboarding-status p,
.charity-onboarding-status ol {
    color: #fff;
}

.charity-onboarding-status h2 {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 4px 0 6px;
}

.charity-onboarding-status p,
.charity-onboarding-status ol {
    margin-bottom: 0;
}

.charity-onboarding-status ol {
    padding-left: 18px;
    margin-top: 10px;
    font-weight: 700;
}

.charity-onboarding-status .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    white-space: normal;
}

.charity-onboarding-status-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.7rem;
}

.charity-onboarding-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.charity-onboarding-progress div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    background: #fff;
    color: #4a4f55;
    font-weight: 800;
}

.charity-onboarding-progress span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef2f5;
    color: #6c757d;
}

.charity-onboarding-progress .is-done {
    border-color: rgba(64, 191, 168, 0.38);
    background: rgba(64, 191, 168, 0.08);
    color: var(--h2h-teal-dark);
}

.charity-onboarding-progress .is-done span {
    background: var(--h2h-teal);
    color: #fff;
}

.charity-benefits-section h2 {
    color: var(--h2h-dark);
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 18px;
}

.charity-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    gap: 22px;
}

.charity-benefit-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    border-radius: 6px;
    padding: 18px;
    min-height: 150px;
}

.charity-benefit-card img {
    width: 100%;
    height: 112px;
    border-radius: 6px;
    object-fit: cover;
    background: #eef2f5;
}

.charity-benefit-card span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(64, 191, 168, 0.14);
    color: var(--h2h-teal-dark);
    margin-bottom: 9px;
}

.charity-benefit-card h3 {
    color: var(--h2h-pink);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.charity-benefit-card p {
    color: #4a4f55;
    margin: 0;
}

.donor-table-panel h2 {
    margin-bottom: 12px;
}

.donor-table {
    min-width: 760px;
    margin-bottom: 0;
}

.donor-table .donor-number-col,
.donor-table tbody td:first-child {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
}

.donor-table thead th {
    color: #000;
    font-weight: 800;
    border-bottom: 1px solid #d8dde3;
    text-align: center;
}

.donor-table tbody td {
    text-align: center;
    vertical-align: middle;
    border-color: #d8dde3;
    padding: 12px 10px;
}

.donor-table tbody tr:nth-child(odd) td {
    background: #f0f0f0;
}

.donor-charity-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
}

.donor-charity-cell img {
    width: 42px;
    height: 42px;
    object-fit: cover;
}

.donor-charity-cell a {
    color: var(--h2h-teal-dark);
    font-weight: 600;
    text-decoration: none;
}

.donor-charity-cell a:hover {
    color: var(--h2h-pink);
}

.donor-icon-action {
    color: var(--h2h-teal);
    border: 0;
    padding: 5px 8px;
}

.donor-icon-action:hover {
    color: var(--h2h-pink);
}

.donor-table-controls,
.donor-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.donor-table-controls label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.donor-table-controls input[type="number"] {
    width: 64px;
}

.donor-table-controls input[type="search"] {
    width: 210px;
}

.donor-table-footer {
    margin: 12px 0 0;
}

.donor-table-footer .page-link {
    color: #4a4f55;
}

.donor-table-footer .active .page-link {
    background: var(--h2h-pink);
    border-color: var(--h2h-pink);
    color: #fff;
}

.dt-container .dt-layout-row {
    align-items: center;
    margin: 0 0 12px;
}

.dt-container .dt-layout-row:last-child {
    margin: 12px 0 0;
}

.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-info {
    color: #222831;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    border: 1px solid #d8dde3;
    border-radius: 4px;
}

.dt-container .dt-paging .page-link {
    color: #4a4f55;
}

.dt-container .dt-paging .active .page-link {
    background-color: var(--h2h-pink);
    border-color: var(--h2h-pink);
    color: #fff;
}

.h2h-modal-content {
    border: 0;
    border-radius: 8px;
}

.h2h-modal-content .modal-title {
    color: var(--h2h-pink);
    font-size: 1.35rem;
    font-weight: 800;
}

.avatar-initials {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    background: var(--h2h-teal);
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
}

.donor-profile-shell {
    background: #f7f8f9;
    padding: 28px 0 34px;
    min-height: calc(100vh - 205px);
}

.donor-profile-shell .container-fluid {
    max-width: 1380px;
}

.profile-side-card,
.profile-main-card,
.profile-edit-card {
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    height: auto;
}

.profile-side-card .list-group {
    margin: 18px;
    border: 1px solid #d8dde3;
    border-radius: 6px;
    overflow: hidden;
}

.profile-side-card .list-group-item {
    color: var(--h2h-teal-dark);
    padding: 12px 16px;
}

.profile-side-card .list-group-item:hover,
.profile-side-card .list-group-item:focus {
    background: rgba(64, 191, 168, 0.08);
    color: var(--h2h-pink);
}

.profile-panel-heading {
    background: var(--h2h-teal);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    padding: 13px 18px;
}

.profile-main-card > p,
.profile-main-card hr,
.profile-summary,
.profile-edit-card form,
.profile-edit-card h2 {
    margin-left: 22px;
    margin-right: 22px;
}

.profile-edit-card h2 {
    margin-top: 20px;
    font-size: 1.25rem;
}

.profile-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    padding-top: 22px;
}

.profile-summary p {
    margin-bottom: 3px;
}

.profile-photo-preview {
    min-width: 120px;
    text-align: center;
    padding-top: 8px;
}

.profile-photo-preview img {
    width: 94px;
    height: 94px;
    border-radius: 4px;
    object-fit: cover;
}

.profile-photo-preview .avatar-initials {
    width: 76px;
    height: 76px;
    margin: 0 auto;
    font-size: 1.45rem;
}

.profile-main-card hr {
    margin-top: 18px;
    margin-bottom: 18px;
}

.profile-main-card p {
    line-height: 1.45;
}

.profile-upload-preview {
    display: inline-block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    background: #eef2f5;
}

.profile-upload-preview[src=""] {
    display: none;
}

.charity-stripe-onboarding,
.charity-stripe-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    border-radius: 6px;
    padding: 22px;
    background: var(--h2h-teal);
    color: #fff;
    box-shadow: 0 10px 22px rgba(21, 159, 140, 0.16);
}

.charity-stripe-status {
    background: #eefaf7;
    color: var(--h2h-dark);
    border: 1px solid rgba(64, 191, 168, 0.35);
}

.charity-stripe-onboarding h2,
.charity-stripe-status h2 {
    margin: 4px 0 8px;
    font-size: 1.35rem;
    font-weight: 800;
}

.charity-stripe-onboarding p,
.charity-stripe-status p {
    margin: 0;
    max-width: 850px;
}

.charity-stripe-onboarding ol {
    margin: 14px 0 0;
    padding-left: 22px;
    font-weight: 700;
}

.charity-stripe-onboarding .charity-kicker {
    color: #fff;
}

.stripe-connect-shell {
    background: #fff;
}

.portal-narrow {
    max-width: 1060px;
}

.stripe-connect-heading {
    margin-bottom: 22px;
    text-align: center;
}

.stripe-connect-heading h1 {
    color: var(--h2h-teal);
    font-size: 1.95rem;
    font-weight: 800;
    margin: 4px 0 8px;
}

.stripe-connect-heading p {
    color: #4a4f55;
    margin: 0 auto;
    max-width: 760px;
}

.stripe-connect-card {
    overflow: hidden;
    padding: 0;
}

.stripe-connect-card-header,
.stripe-connect-intro,
.stripe-connect-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.stripe-connect-card-header {
    padding: 18px 22px;
    background: var(--h2h-teal);
    color: #fff;
}

.stripe-connect-card-header h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
}

.stripe-connect-card-header p {
    margin: 4px 0 0;
}

.stripe-connect-intro,
.stripe-connect-warning,
.stripe-connect-success,
.stripe-connect-ready,
.stripe-account-panel,
.stripe-requirements-panel {
    margin: 22px;
}

.stripe-connect-intro {
    border: 1px solid rgba(64, 191, 168, 0.25);
    border-radius: 6px;
    padding: 20px;
    background: #f4fbf9;
}

.stripe-connect-intro h3,
.stripe-account-panel h3,
.stripe-requirements-panel h3 {
    margin: 0 0 8px;
    color: var(--h2h-dark);
    font-size: 1.12rem;
    font-weight: 800;
}

.stripe-connect-intro p {
    margin: 0;
    color: #4a4f55;
}

.stripe-connect-success,
.stripe-connect-ready {
    border-radius: 6px;
    background: var(--h2h-teal);
    color: #fff;
}

.stripe-connect-success {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.stripe-connect-success i {
    font-size: 1.55rem;
}

.stripe-connect-success span {
    display: block;
    margin-top: 6px;
}

.stripe-connect-ready {
    padding: 18px;
    font-weight: 800;
}

.stripe-connect-warning {
    border-radius: 6px;
    padding: 18px;
    background: #fff6df;
    color: #6f4d00;
}

.stripe-connect-warning span {
    display: block;
    margin-top: 4px;
}

.stripe-account-panel,
.stripe-requirements-panel {
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(21, 27, 34, 0.08);
}

.stripe-account-panel h3,
.stripe-requirements-panel h3 {
    border-bottom: 1px solid #e0e4e8;
    padding: 14px 16px;
    background: #f8f9fa;
}

.stripe-account-panel dl {
    display: grid;
    grid-template-columns: minmax(180px, 34%) 1fr;
    gap: 12px 18px;
    margin: 0;
    padding: 18px 16px;
}

.stripe-account-panel dt {
    font-weight: 800;
}

.stripe-account-panel dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.stripe-requirements-panel p,
.stripe-requirements-panel ul {
    margin: 0;
    padding: 0 16px 16px;
}

.stripe-requirements-panel ul {
    padding-left: 34px;
}

.stripe-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    background: #eef2f5;
    color: var(--h2h-dark);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.stripe-status-pill.is-active {
    background: #198754;
    color: #fff;
}

.stripe-status-pill.is-pending {
    background: #fff3cd;
    color: #7a5700;
}

.stripe-status-pill.is-restricted {
    background: #ffe1e7;
    color: #9d1644;
}

.h2h-chat-nav-link {
    position: relative;
}

.h2h-chat-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.h2h-chat-nav-icon b,
.h2h-chat-thread-meta b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #f35f6b;
    color: #fff;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.h2h-chat-nav-icon b {
    position: absolute;
    top: -11px;
    right: -12px;
}

.h2h-chat-shell {
    background: #f3f6fa;
    min-height: calc(100vh - 76px);
    padding: 22px 0;
}

.h2h-chat-container {
    max-width: 1320px;
}

.h2h-chat-titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.h2h-chat-titlebar h1 {
    margin: 0;
    color: var(--h2h-dark);
    font-size: 1.35rem;
    font-weight: 900;
}

.h2h-chat-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: var(--h2h-dark);
    text-decoration: none;
}

.h2h-chat-app {
    display: grid;
    grid-template-columns: minmax(300px, 415px) minmax(0, 1fr);
    gap: 16px;
    min-height: 720px;
}

.h2h-chat-sidebar,
.h2h-chat-panel {
    overflow: hidden;
    border: 1px solid #dde5ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

.h2h-chat-sidebar {
    padding: 18px 8px 18px 16px;
}

.h2h-chat-sidebar h2 {
    margin: 0 0 20px;
    color: #101828;
    font-size: 1rem;
    font-weight: 900;
}

.h2h-chat-list {
    display: grid;
    gap: 4px;
    max-height: 660px;
    overflow-y: auto;
    padding-right: 8px;
}

.h2h-chat-thread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    width: 100%;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 0 8px 8px 0;
    padding: 13px 10px 13px 12px;
    background: transparent;
    color: var(--h2h-dark);
    text-align: left;
}

.h2h-chat-thread:hover,
.h2h-chat-thread.is-active {
    background: #f4f7fb;
    border-left-color: #233044;
}

.h2h-chat-thread.has-unread {
    background: #e9fbf4;
    border-left-color: #0abf86;
}

.h2h-chat-thread-main {
    min-width: 0;
}

.h2h-chat-thread-main strong,
.h2h-chat-thread-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2h-chat-thread-main strong {
    color: var(--h2h-dark);
    font-size: 0.94rem;
    font-weight: 900;
}

.h2h-chat-thread-main em {
    color: #536681;
    font-style: normal;
    font-weight: 500;
}

.h2h-chat-thread-main small {
    margin-top: 5px;
    color: #42526d;
    font-size: 0.82rem;
    font-weight: 700;
}

.h2h-chat-thread-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.h2h-chat-thread-meta time {
    color: #7790ad;
    font-size: 0.72rem;
}

.h2h-chat-panel {
    min-width: 0;
}

.h2h-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 720px;
    color: #8b9bb3;
    text-align: center;
}

.h2h-chat-empty i {
    color: #c8d3df;
    font-size: 2.6rem;
}

.h2h-chat-empty p {
    margin: 14px 0 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.h2h-chat-room {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 720px;
}

.h2h-chat-room-header {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #edf1f6;
    padding: 18px 24px;
}

.h2h-chat-room-header img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
}

.h2h-chat-room-header h2 {
    margin: 0;
    color: var(--h2h-dark);
    font-size: 1rem;
    font-weight: 900;
}

.h2h-chat-room-header span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0aa678;
    font-size: 0.74rem;
    font-weight: 700;
}

.h2h-chat-room-header span i {
    font-size: 0.45rem;
}

.h2h-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 24px;
}

.h2h-chat-message {
    width: min(574px, 78%);
    border: 1px solid #dce4ee;
    border-radius: 14px;
    padding: 14px 16px 10px;
    background: #fff;
    color: #17233a;
}

.h2h-chat-message.is-mine {
    align-self: flex-end;
    border-color: #10a77f;
    background: #eafaf4;
}

.h2h-chat-message p {
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.h2h-chat-message time {
    display: block;
    margin-top: 8px;
    color: #5d6b82;
    font-size: 0.72rem;
    text-align: right;
}

.h2h-chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 10px;
    border-top: 1px solid #edf1f6;
    padding: 18px 16px;
}

.h2h-chat-composer input {
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: #f0f4f8;
    padding: 0 18px;
    color: var(--h2h-dark);
    font-weight: 700;
}

.h2h-chat-composer input:focus {
    outline: 2px solid rgba(0, 153, 116, 0.22);
}

.h2h-chat-composer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: #009970;
    color: #fff;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .profile-summary {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    .h2h-navbar .navbar-collapse {
        padding-top: 12px;
    }

    .h2h-navbar .navbar-collapse > .h2h-navbar-actions {
        align-items: stretch !important;
        width: 100%;
    }

    .h2h-navbar .navbar-collapse > .h2h-navbar-actions > .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .donor-metrics-grid {
        grid-template-columns: 1fr;
    }

    .donor-public-hero-grid {
        grid-template-columns: 1fr;
    }

    .charity-metrics-grid,
    .charity-two-column,
    .charity-benefits-grid,
    .h2h-chat-app {
        grid-template-columns: 1fr;
    }

    .h2h-chat-app,
    .h2h-chat-empty,
    .h2h-chat-room {
        min-height: 560px;
    }

    .h2h-chat-list {
        max-height: 280px;
    }

    .charity-landing-card,
    .charity-share-card {
        grid-template-columns: 1fr;
    }

    .charity-stripe-onboarding,
    .charity-stripe-status,
    .stripe-connect-card-header,
    .stripe-connect-intro,
    .stripe-connect-warning {
        align-items: stretch;
        flex-direction: column;
    }

    .charity-download-grid {
        min-width: 0;
    }

    .coupon-strip {
        grid-auto-columns: 250px;
    }

    .charities-grid-view {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .rewards-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }

    .my-coupons-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .donor-public-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .h2h-chat-shell {
        padding-top: 14px;
    }

    .h2h-chat-titlebar h1 {
        font-size: 1.1rem;
    }

    .h2h-chat-sidebar,
    .h2h-chat-room-header,
    .h2h-chat-messages,
    .h2h-chat-composer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .h2h-chat-message {
        width: 92%;
    }

    .donor-public-banner {
        height: 170px;
    }

    .donor-public-profile,
    .donor-public-data,
    .donor-public-donations {
        padding: 18px;
    }

    .donor-public-share {
        min-width: 0;
        width: 100%;
    }

    .my-coupons-heading,
    .my-coupons-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .my-coupons-heading .btn,
    .my-coupons-tabs .btn {
        justify-content: center;
        width: 100%;
    }

    .my-coupons-tabs {
        flex-direction: column;
    }

    .my-coupons-grid {
        grid-template-columns: 1fr;
    }

    .rewards-browser-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .rewards-business-row {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 10px;
    }

    .rewards-business-strip {
        justify-content: flex-start;
    }

    .rewards-scroll-btn {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }

    .rewards-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .rewards-grid {
        grid-template-columns: 1fr;
    }

    .reward-ticket {
        grid-template-columns: 118px 1fr;
    }

    .portal-footer-inner,
    .portal-footer-brand {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .portal-support-btn {
        justify-content: center;
        width: 100%;
    }

    .charities-browser-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .charities-browser-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .charities-search-wrap {
        flex: 0 1 auto;
        max-width: none;
        width: 100%;
    }

    .charities-view-toggle {
        width: 100%;
    }

    .charities-view-toggle .btn {
        justify-content: center;
        width: 100%;
    }

    .charities-grid-view {
        grid-template-columns: 1fr;
    }

    .business-public-charity-grid,
    .business-public-rewards-grid {
        grid-template-columns: 1fr;
    }

    .business-public-top-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .business-public-reward-charity-row {
        grid-template-columns: 1fr;
    }

    .business-public-reward-scroll {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 430px;
    }

    .charity-special-form-layout {
        grid-template-columns: 1fr;
    }

    .charity-donor-detail-grid {
        grid-template-columns: 1fr;
    }

    .charity-donor-info-card {
        position: static;
    }

    .business-public-logo {
        width: 140px;
        height: 140px;
    }

    .business-public-hero .btn {
        width: 100% !important;
    }

    .donor-dashboard-header,
    .charity-dashboard-header,
    .business-dashboard-header,
    .charity-onboarding-status,
    .charity-panel-heading,
    .charity-section-heading,
    .donor-panel-heading,
    .donor-section-heading,
    .donor-table-controls,
    .donor-table-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-profile-actions,
    .dashboard-profile-actions .btn,
    .donor-share-profile,
    .charity-share-profile,
    .business-share-profile,
    .charity-stripe-onboarding .btn,
    .charity-stripe-status .btn,
    .stripe-connect-intro .btn,
    .stripe-connect-warning .btn,
    .donor-section-heading .btn {
        justify-content: center;
        width: 100%;
    }

    .stripe-account-panel dl {
        grid-template-columns: 1fr;
    }

    .charity-section-heading .btn,
    .charity-landing-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .charity-download-grid {
        grid-template-columns: 1fr;
    }

    .charity-onboarding-status,
    .charity-onboarding-progress,
    .charity-benefit-card {
        grid-template-columns: 1fr;
    }

    .charity-onboarding-status {
        text-align: left;
    }

    .charity-onboarding-status .btn {
        width: 100%;
    }

    .charity-benefit-card img {
        height: 170px;
    }

    .donor-table-controls label,
    .donor-table-controls input[type="search"] {
        width: 100%;
    }

    .coupon-strip {
        grid-auto-columns: 250px;
    }

    .auth-form-card {
        padding: 28px;
    }

    .role-grid {
        grid-template-columns: 1fr;
    }

    .wizard-steps {
        gap: 14px;
        font-size: 0.85rem;
    }
}

.platform-announcements {
    display: grid;
    gap: 10px;
    margin: 18px auto;
    max-width: 1180px;
    padding: 0 18px;
}

.platform-announcement {
    align-items: flex-start;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    margin: 0;
}

.platform-announcement strong {
    flex: 0 0 auto;
}

.platform-announcement span {
    min-width: 0;
}

@media (max-width: 560px) {
    .business-public-reward-scroll {
        grid-template-columns: 1fr;
    }
}