:root {
    --campaign-ink: #172a25;
    --campaign-muted: #5e716b;
    --campaign-green: #17735d;
    --campaign-green-dark: #0d4f41;
    --campaign-mint: #e8f5ee;
    --campaign-sand: #f7f4ee;
    --campaign-line: #dce8e1;
    --campaign-shadow: 0 18px 45px rgba(18, 68, 55, .10);
}

.campaign-shell {
    max-width: 1180px;
}

.campaign-hero,
.campaign-detail-hero {
    background: radial-gradient(circle at 82% 12%, rgba(255, 232, 175, .45), transparent 26rem), linear-gradient(135deg, #0d4f41, #1e8066);
    color: #fff;
}

.campaign-hero {
    padding: 5.25rem 0 4.65rem;
}

.campaign-hero-copy {
    max-width: 720px;
}

.campaign-eyebrow {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .75rem;
    color: #5e9e8c;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.campaign-hero .campaign-eyebrow,
.campaign-detail-hero .campaign-eyebrow {
    color: #c6eadc;
}

.campaign-hero h1,
.campaign-detail-copy h1,
.campaign-receipt-card h1 {
    margin: 0;
    font-size: clamp(2.1rem, 4.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.campaign-hero-copy > p:last-child,
.campaign-detail-copy > p:not(.campaign-eyebrow) {
    max-width: 640px;
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 1.08rem;
    line-height: 1.8;
}

.campaign-section,
.campaign-detail-section,
.campaign-receipt-section {
    padding: 5rem 0;
    background: #fbfdfc;
}

.campaign-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.campaign-section-heading h2,
.campaign-story h2,
.campaign-donation-panel h2,
.campaign-unavailable h2 {
    margin: 0;
    color: var(--campaign-ink);
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.campaign-section-heading > p {
    max-width: 405px;
    margin: 0;
    color: var(--campaign-muted);
    font-size: .94rem;
    line-height: 1.7;
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

.campaign-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--campaign-line);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 5px 20px rgba(24, 65, 55, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--campaign-shadow);
}

.campaign-card-media {
    position: relative;
    height: 205px;
    overflow: hidden;
    background: linear-gradient(135deg, #d5eee2, #a9d4c3);
}

.campaign-card-media img,
.campaign-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-card-placeholder,
.campaign-detail-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #fff;
    font-size: 3rem;
    background: linear-gradient(135deg, #16725d, #44a984);
}

.campaign-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    color: #175a48;
    background: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.campaign-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.35rem;
}

.campaign-card-status {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .7rem;
    color: var(--campaign-muted);
    font-size: .75rem;
    font-weight: 600;
}

.campaign-card-status.is-open i {
    color: #2dac6f;
    font-size: .55rem;
}

.campaign-card-status.is-closed i {
    color: #a58537;
}

.campaign-card h2 {
    margin: 0;
    font-size: 1.24rem;
    line-height: 1.35;
}

.campaign-card h2 a {
    color: var(--campaign-ink);
    text-decoration: none;
}

.campaign-card-summary {
    display: -webkit-box;
    overflow: hidden;
    min-height: 4.5em;
    margin: .7rem 0 1.25rem;
    color: var(--campaign-muted);
    font-size: .9rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.campaign-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--campaign-muted);
    font-size: .8rem;
}

.campaign-progress-copy strong {
    color: var(--campaign-green-dark);
    font-size: .9rem;
}

.campaign-progress-goal {
    margin-top: .35rem;
}

.campaign-progress {
    display: block;
    width: 100%;
    height: .5rem;
    margin: .6rem 0 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e2eee8;
}

.campaign-progress::-webkit-progress-bar {
    background: #e2eee8;
}

.campaign-progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, #1a765e, #49ad7f);
}

.campaign-progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #1a765e, #49ad7f);
}

.campaign-action-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.4rem;
    color: var(--campaign-green);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}

.campaign-action-link i {
    transition: transform .2s ease;
}

.campaign-action-link:hover i {
    transform: translateX(.25rem);
}

.campaign-empty-state,
.campaign-unavailable {
    grid-column: 1 / -1;
    padding: 3rem 2rem;
    border: 1px dashed #c7ddd2;
    border-radius: 1rem;
    color: var(--campaign-muted);
    text-align: center;
    background: #fff;
}

.campaign-empty-state > i,
.campaign-unavailable > i {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 50%;
    color: var(--campaign-green);
    background: var(--campaign-mint);
    font-size: 1.25rem;
}

.campaign-empty-state h2,
.campaign-unavailable h2 {
    font-size: 1.25rem;
}

.campaign-empty-state p,
.campaign-unavailable p {
    max-width: 470px;
    margin: .7rem auto 0;
    line-height: 1.65;
}

.campaign-pagination,
.campaign-admin-pagination {
    margin-top: 2rem;
}

.campaign-detail-hero {
    padding: 2rem 0 4rem;
}

.campaign-back-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 2.5rem;
    color: #d8efe5;
    font-size: .88rem;
    text-decoration: none;
}

.campaign-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 4rem;
    align-items: center;
}

.campaign-detail-media {
    height: min(390px, 44vw);
    overflow: hidden;
    border: 8px solid rgba(255, 255, 255, .14);
    border-radius: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 20, 15, .2);
}

.campaign-detail-progress {
    max-width: 520px;
    margin-top: 2rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 1rem;
    background: rgba(4, 47, 38, .25);
}

.campaign-detail-progress .campaign-progress-copy,
.campaign-detail-progress .campaign-progress-copy strong {
    color: #fff;
}

.campaign-detail-progress .campaign-progress-goal {
    color: #d9eee6;
}

.campaign-detail-progress .campaign-progress {
    background: rgba(255, 255, 255, .2);
}

.campaign-donation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
    gap: 4rem;
    align-items: start;
}

.campaign-story {
    color: var(--campaign-ink);
}

.campaign-rich-content {
    margin-top: 1.25rem;
    color: #40564e;
    line-height: 1.85;
}

.campaign-rich-content > :first-child {
    margin-top: 0;
}

.campaign-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
}

.campaign-donation-panel {
    padding: 1.65rem;
    border: 1px solid var(--campaign-line);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: var(--campaign-shadow);
}

.campaign-donation-panel-heading > p:last-child {
    margin: .7rem 0 0;
    color: var(--campaign-muted);
    font-size: .9rem;
    line-height: 1.65;
}

.campaign-donation-form {
    margin-top: 1.65rem;
}

.campaign-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.campaign-field,
.campaign-methods {
    margin: 0 0 1.15rem;
    padding: 0;
    border: 0;
}

.campaign-field label,
.campaign-methods legend {
    display: block;
    margin-bottom: .45rem;
    color: var(--campaign-ink);
    font-size: .86rem;
    font-weight: 700;
}

.campaign-field input:not([type="file"]),
.campaign-field textarea,
.campaign-money-input-wrap {
    width: 100%;
    border: 1px solid #cbdcd3;
    border-radius: .72rem;
    color: var(--campaign-ink);
    background: #fff;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campaign-field input:not([type="file"]),
.campaign-field textarea {
    padding: .7rem .8rem;
}

.campaign-field textarea {
    resize: vertical;
}

.campaign-field input:focus,
.campaign-field textarea:focus,
.campaign-money-input-wrap:focus-within {
    outline: 0;
    border-color: var(--campaign-green);
    box-shadow: 0 0 0 3px rgba(23, 115, 93, .13);
}

.campaign-field .is-invalid,
.campaign-methods.has-error,
.campaign-upload-control.is-invalid {
    border-color: #c4404b;
}

.campaign-field-hint,
.campaign-money-preview,
.campaign-field-error {
    margin: .4rem 0 0;
    font-size: .76rem;
    line-height: 1.5;
}

.campaign-field-hint {
    color: var(--campaign-muted);
}

.campaign-money-preview {
    min-height: 1.15em;
    color: var(--campaign-green);
    font-weight: 700;
}

.campaign-field-error,
.campaign-form-alert {
    color: #a92834;
}

.campaign-form-alert {
    margin-top: 1rem;
    padding: .75rem .85rem;
    border-radius: .65rem;
    background: #fff1f2;
    font-size: .86rem;
}

.campaign-method-options {
    display: grid;
    gap: .65rem;
}

.campaign-method-option {
    display: block;
    cursor: pointer;
}

.campaign-method-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.campaign-method-option-main {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid #cbdcd3;
    border-radius: .75rem;
    transition: border-color .15s ease, background .15s ease;
}

.campaign-method-option input:checked + .campaign-method-option-main {
    border-color: var(--campaign-green);
    background: #f0faf5;
}

.campaign-method-option input:focus-visible + .campaign-method-option-main {
    outline: 3px solid rgba(23, 115, 93, .18);
}

.campaign-method-icon {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .6rem;
    color: var(--campaign-green);
    background: var(--campaign-mint);
}

.campaign-method-option-main strong,
.campaign-method-option-main small {
    display: block;
}

.campaign-method-option-main strong {
    color: var(--campaign-ink);
    font-size: .85rem;
}

.campaign-method-option-main small {
    margin-top: .1rem;
    color: var(--campaign-muted);
    font-size: .72rem;
}

.campaign-method-details {
    display: none;
    grid-template-columns: 1fr;
    gap: .2rem;
    margin: .45rem 0 0 3rem;
    padding: .65rem .75rem;
    border-left: 2px solid #95cdb7;
    color: var(--campaign-muted);
    font-size: .78rem;
}

.campaign-method-option input:checked ~ .campaign-method-details {
    display: grid;
}

.campaign-method-details strong {
    color: var(--campaign-ink);
    font-size: .92rem;
}

.campaign-method-details em {
    margin-top: .15rem;
    font-style: normal;
    line-height: 1.5;
}

.campaign-method-details img {
    width: 132px;
    max-width: 100%;
    border: 1px solid var(--campaign-line);
    border-radius: .55rem;
}

.campaign-money-input-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .8rem;
}

.campaign-money-input-wrap > span {
    color: var(--campaign-green);
    font-weight: 700;
}

.campaign-money-input-wrap input {
    min-width: 0;
    padding: .7rem 0;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.campaign-upload-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 125px;
    padding: 1rem;
    border: 1px dashed #93bca9;
    border-radius: .75rem;
    cursor: pointer;
    color: var(--campaign-muted);
    text-align: center;
    background: #fafdfb;
}

.campaign-upload-control > i {
    margin-bottom: .45rem;
    color: var(--campaign-green);
    font-size: 1.45rem;
}

.campaign-upload-control > span {
    color: var(--campaign-ink);
    font-size: .84rem;
    font-weight: 700;
}

.campaign-upload-control small {
    margin-top: .25rem;
    font-size: .73rem;
}

.campaign-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.campaign-proof-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    margin-top: .7rem;
    border: 1px solid var(--campaign-line);
    border-radius: .7rem;
    object-fit: contain;
}

.campaign-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: .8rem 0;
    color: var(--campaign-muted);
    font-size: .78rem;
    line-height: 1.5;
}

.campaign-checkbox input {
    width: 1rem;
    height: 1rem;
    margin-top: .12rem;
    accent-color: var(--campaign-green);
}

.campaign-checkbox.has-error span {
    color: #a92834;
}

.campaign-submit-button {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: .82rem 1rem;
    border: 1px solid var(--campaign-green);
    border-radius: .75rem;
    color: #fff;
    background: var(--campaign-green);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.campaign-submit-button:hover {
    color: #fff;
    background: var(--campaign-green-dark);
    transform: translateY(-1px);
}

.campaign-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.campaign-receipt-section {
    min-height: 66vh;
    display: grid;
    place-items: center;
}

.campaign-receipt-card {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1.7rem, 5vw, 3.4rem);
    border: 1px solid var(--campaign-line);
    border-radius: 1.5rem;
    color: var(--campaign-muted);
    text-align: center;
    background: #fff;
    box-shadow: var(--campaign-shadow);
}

.campaign-receipt-icon {
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 50%;
    color: #147157;
    background: var(--campaign-mint);
    font-size: 1.4rem;
}

.campaign-receipt-card .campaign-eyebrow {
    justify-content: center;
}

.campaign-receipt-card h1 {
    color: var(--campaign-ink);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.campaign-receipt-card > p:not(.campaign-eyebrow) {
    margin: 1rem auto 0;
    line-height: 1.7;
}

.campaign-receipt-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 1.7rem 0 0;
    overflow: hidden;
    border: 1px solid var(--campaign-line);
    border-radius: .85rem;
    text-align: left;
    background: var(--campaign-line);
}

.campaign-receipt-details > div {
    padding: .8rem;
    background: #fff;
}

.campaign-receipt-details dt {
    margin-bottom: .2rem;
    color: var(--campaign-muted);
    font-size: .72rem;
    font-weight: 600;
}

.campaign-receipt-details dd {
    margin: 0;
    color: var(--campaign-ink);
    font-size: .86rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.campaign-receipt-card .campaign-submit-button {
    max-width: 260px;
}

html[dir="rtl"] .campaign-method-details {
    margin-right: 3rem;
    margin-left: 0;
    border-right: 2px solid #95cdb7;
    border-left: 0;
}

@media (max-width: 991.98px) {
    .campaign-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-donation-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    /*
     * A wide child on an RTL document can move the initial horizontal scroll
     * position away from the visible page. Keep every detail-panel track
     * shrinkable so Arabic campaign content always starts inside the viewport.
     */
    .campaign-detail-hero,
    .campaign-detail-section {
        overflow-x: clip;
    }

    .campaign-detail-hero .campaign-shell,
    .campaign-detail-section .campaign-shell,
    .campaign-detail-layout,
    .campaign-donation-layout {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .campaign-detail-layout > *,
    .campaign-donation-layout > *,
    .campaign-detail-copy,
    .campaign-detail-progress,
    .campaign-detail-media,
    .campaign-story,
    .campaign-donation-panel,
    .campaign-rich-content {
        min-width: 0;
        max-width: 100%;
    }

    .campaign-detail-copy h1,
    .campaign-detail-copy > p:not(.campaign-eyebrow),
    .campaign-rich-content {
        overflow-wrap: anywhere;
    }

    .campaign-hero,
    .campaign-section,
    .campaign-detail-section,
    .campaign-receipt-section {
        padding: 3.4rem 0;
    }

    .campaign-detail-hero {
        padding: 1.4rem 0 3.4rem;
    }

    .campaign-section-heading,
    .campaign-detail-layout {
        display: block;
    }

    .campaign-section-heading > p {
        margin-top: .9rem;
    }

    .campaign-detail-media {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        margin-top: 2rem;
    }

    .campaign-grid,
    .campaign-form-grid {
        grid-template-columns: 1fr;
    }

    .campaign-card-media {
        height: 190px;
    }
}

@media (max-width: 430px) {
    .campaign-donation-panel {
        padding: 1.15rem;
        border-radius: 1rem;
    }

    .campaign-receipt-details {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-card,
    .campaign-action-link i,
    .campaign-submit-button {
        transition: none;
    }
}