/* /public/assets/css/pages-donation.css */
/* =========================================================
   Sadaqah Eternity — Styles du tunnel de don (Prompt 6A)
   ---------------------------------------------------------
   Couvre :
     - form.php  (etapes 1 pays, 2 projets, 3 formulaire)
     - success.php (carte recap + popup felicitation)
     - cancel.php  (carte d annulation)
     - tracking.php (suivi individuel)
     - history.php  (historique consolide)
     - retrieve.php (demande de lien par email)
   ========================================================= */

/* ---------- En-tete de page (reutilisable) ---------------- */
.donation-header {
    background: linear-gradient(135deg, var(--color-primary-mint) 0%, var(--color-primary-light) 100%);
    padding: var(--spacing-12) 0;
    text-align: center;
}
.donation-header h1 {
    margin-bottom: var(--spacing-3);
    color: var(--color-text-main);
}
.donation-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Etapes numerotees ----------------------------- */
.donation-step {
    padding: var(--spacing-8) 0;
}
.donation-step-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}
.donation-step-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
}
.donation-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

/* ---------- Tabs de pays ---------------------------------- */
.donation-country-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.donation-country-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 2px solid var(--color-border);
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.donation-country-tab:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.donation-country-tab.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.donation-country-tab.is-active:hover {
    color: var(--color-white);
}
.donation-country-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-background-alt);
}
.donation-country-tab-disabled small {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-left: var(--spacing-1);
}
.donation-country-tab-free {
    border-style: dashed;
}

/* ---------- Panneaux de projets --------------------------- */
.donation-projects-wrap {
    margin-top: var(--spacing-4);
}
.donation-projects-list {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-6);
}
.donation-projects-list.is-active {
    display: grid;
}

/* ---------- Card de projet -------------------------------- */
.donation-project-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.donation-project-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.donation-project-card.is-selected {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}
.donation-project-card-image {
    aspect-ratio: 16 / 9;
    background-color: var(--color-background-alt);
    overflow: hidden;
}
.donation-project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.donation-project-card-body {
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    flex: 1;
}
.donation-project-card-body h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--color-text-main);
}
.donation-project-card-body > p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.donation-project-card-free {
    border-style: dashed;
    background-color: var(--color-background-alt);
}
.donation-project-free-info {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* ---------- Progress bar projet --------------------------- */
.donation-project-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.donation-progress-bar {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: var(--color-border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.donation-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}
.donation-progress-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.donation-progress-meta strong {
    color: var(--color-text-main);
    font-weight: var(--font-weight-semibold);
}
.donation-progress-meta strong span {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}
.donation-progress-pct {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    margin-left: auto;
}
.donation-progress-donors {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.donation-project-cycle-info {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Boutons montants rapides ---------------------- */
.donation-project-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}
.donation-amount-preset {
    padding: var(--spacing-3);
    border: 2px solid var(--color-border);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    cursor: pointer;
    transition: all 0.15s ease;
}
.donation-amount-preset:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-mint);
}
.donation-amount-preset.is-selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}
.donation-amount-preset-full {
    grid-column: 1 / -1;
    padding: var(--spacing-3) var(--spacing-4);
    background: linear-gradient(135deg, var(--color-primary-mint) 0%, var(--color-primary-light) 100%);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
}
.donation-amount-preset-full:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Bouton "Montant libre" : met en evidence la possibilite de saisir un montant
   personnalise sans toucher aux presets classiques. */
.donation-amount-preset-free {
    grid-column: 1 / -1;
    padding: var(--spacing-3) var(--spacing-4);
    background: transparent;
    border: 1px dashed var(--color-primary);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    font-style: italic;
}
.donation-amount-preset-free:hover {
    background: var(--color-primary-mint);
    border-style: solid;
    color: var(--color-primary-dark);
}
.donation-amount-preset-free.is-selected {
    background: var(--color-primary);
    border-style: solid;
    color: var(--color-white);
}

.donation-project-choose {
    margin-top: auto;
}

/* ---------- Formulaire de don ----------------------------- */
.donation-form {
    background-color: var(--color-white);
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}
@media (max-width: 600px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .donation-form {
        padding: var(--spacing-6) var(--spacing-5);
    }
}

/* Support classe d erreur 'is-error' (en plus de .error existant) */
.form-control.is-error {
    border-color: var(--color-error);
}
.form-control.is-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ---------- Champ montant avec symbole € ------------------ */
.donation-amount-field {
    position: relative;
}
.donation-amount-field .form-control {
    padding-right: var(--spacing-10);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}
.donation-amount-currency {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    pointer-events: none;
}
.donation-amount-live {
    margin-top: var(--spacing-2);
    min-height: 1.5em;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ---------- Recap projet (dans le form) ------------------- */
.donation-recap {
    padding: var(--spacing-5) var(--spacing-6);
    background: linear-gradient(135deg, var(--color-primary-mint) 0%, var(--color-primary-light) 100%);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.donation-recap-badge {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}
.donation-recap h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-main);
}
.donation-recap p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--font-size-sm);
    align-self: flex-start;
}
.btn-link:hover {
    color: var(--color-primary-dark);
}

/* ---------- Alerte plaque debloquee ----------------------- */
.plaque-unlocked-alert {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    background: linear-gradient(135deg, var(--color-primary-mint) 0%, var(--color-primary-light) 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-3);
    animation: plaque-slide-down 0.4s ease;
}
.plaque-unlocked-alert img {
    flex-shrink: 0;
    margin-top: 2px;
}
.plaque-unlocked-alert strong {
    display: block;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-1);
}
.plaque-unlocked-alert p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
@keyframes plaque-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 400px;
    }
}

/* ---------- Notice paiement sous le bouton --------------- */
.donation-payment-notice {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: var(--spacing-3) 0 0 0;
    text-align: center;
}

/* =========================================================
   DON ANONYME
   =========================================================
   Le donateur reste identifie pour le recu fiscal, mais son
   nom ne sera pas affiche publiquement (dedicace + plaque
   desactivees). Le JS ajoute .is-disabled sur le groupe
   dedicace quand la case est cochee, et retire l alerte plaque.
*/
.donation-anonymous-group {
    padding: var(--spacing-4) var(--spacing-5);
    background-color: var(--color-bg-alt, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
}
.donation-anonymous-group .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}
.donation-anonymous-group .form-check input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.donation-anonymous-group .form-check label {
    font-weight: var(--font-weight-normal, 400);
    cursor: pointer;
}
.donation-anonymous-group .form-check label strong {
    display: block;
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--spacing-1);
    color: var(--color-text-main);
}
.donation-anonymous-group .form-check label small {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.donation-anonymous-active-notice {
    margin: var(--spacing-3) 0 0 0;
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-primary-mint, #ecfdf5);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md, 8px);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
}
.donation-anonymous-active-notice[hidden] {
    display: none;
}

/* Bloc dedicace griseb quand don anonyme (la JS pose .is-disabled) */
.donation-dedication-fields.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: saturate(0.6);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.donation-dedication-fields.is-disabled input,
.donation-dedication-fields.is-disabled textarea {
    background-color: var(--color-bg-alt, #f9fafb);
}

/* =========================================================
   PAGE SUCCESS
   ========================================================= */
.donation-success {
    position: relative;
}
.donation-success-card {
    background-color: var(--color-white);
    padding: var(--spacing-10) var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.donation-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    background-color: var(--color-success-light);
    margin: 0 auto var(--spacing-5);
}
.donation-success-card h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-3);
}
.donation-success-amount {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-8);
}
.donation-success-amount strong {
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
}

.donation-success-details {
    text-align: left;
    background-color: var(--color-background-alt);
    padding: var(--spacing-5) var(--spacing-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-8);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
.donation-success-detail {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
}
@media (max-width: 560px) {
    .donation-success-detail {
        grid-template-columns: 1fr;
        gap: var(--spacing-1);
    }
}
.donation-success-detail-label {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
}
.donation-success-detail-value {
    color: var(--color-text-main);
}
.donation-success-detail-value code {
    background-color: var(--color-white);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
}

.donation-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.donation-success-email-notice {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--spacing-5);
    margin: 0;
}

.donation-success-footer {
    text-align: center;
    margin-top: var(--spacing-6);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.donation-success-footer a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ---------- Popup de felicitation (triggered_completion) -- */
.completion-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, rgba(27, 110, 60, 0.95) 0%, rgba(39, 174, 96, 0.95) 100%);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    animation: completion-fade-in 0.3s ease;
}
.completion-popup.is-hidden {
    display: none;
}
.completion-popup-inner {
    max-width: 540px;
    width: 100%;
    text-align: center;
    color: var(--color-white);
    animation: completion-scale-in 0.5s ease-out;
}
.completion-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    /* QA finale (C2) : fond vert clair "festif" (au lieu du blanc) qui contraste
       avec le check vert fonce. Diametre 96px (specifie par Brahim). */
    background-color: #D1F7E0;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-6);
    box-shadow: 0 0 0 8px rgba(209, 247, 224, 0.4);
    /* Le SVG check (inline) utilise stroke="currentColor" : on definit ici la
       couleur du trait (vert fonce, lisible sur le fond vert clair). */
    color: #1A7A3E;
}
/* Pulsation douce du check (remplace la goutte d'eau, QA finale C2).
   Specifie par Brahim : scale 1 <-> 1.05 sur 2s.
   Limitee a la classe -pulse pour ne pas affecter d'autres usages. */
.completion-popup-icon-pulse {
    animation: completion-pulse 2s ease-in-out infinite;
    will-change: transform;
}
@keyframes completion-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .completion-popup-icon-pulse { animation: none; }
}
/* Force la taille du check SVG dans la pop-up (specifie par Brahim : 56px). */
.completion-popup-check {
    width: 56px;
    height: 56px;
    display: block;
}
.completion-popup h2 {
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin-bottom: var(--spacing-5);
    color: var(--color-white);
}
.completion-popup-main {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
    line-height: 1.5;
}
.completion-popup-main strong {
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}
.completion-popup-sub {
    font-size: var(--font-size-base);
    opacity: 0.95;
    margin-bottom: var(--spacing-8);
}
.completion-popup .btn-outline-white {
    border: 2px solid var(--color-white);
    color: var(--color-white);
    background: transparent;
    padding: var(--spacing-3) var(--spacing-8);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
}
.completion-popup .btn-outline-white:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}
@keyframes completion-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes completion-scale-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* =========================================================
   PAGE CANCEL / LIEN EXPIRE
   ========================================================= */
.donation-cancel-card {
    background-color: var(--color-white);
    padding: var(--spacing-10) var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.donation-cancel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    background-color: var(--color-warning-light);
    margin: 0 auto var(--spacing-5);
}
.donation-cancel-card h1 {
    margin-bottom: var(--spacing-4);
}
.donation-cancel-card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-8);
}
.donation-cancel-actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================
   PAGE TRACKING
   ========================================================= */
.donation-tracking-card {
    background-color: var(--color-white);
    padding: var(--spacing-6) var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-5);
}
.donation-tracking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    gap: var(--spacing-4);
    flex-wrap: wrap;
}
.donation-tracking-label {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-1);
    font-weight: var(--font-weight-semibold);
}
.donation-tracking-amount {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin: 0;
}
.donation-tracking-status {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.donation-tracking-status-completed {
    background-color: var(--color-success-light);
    color: var(--color-success);
}
.donation-tracking-status-pending {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}
.donation-tracking-status-failed,
.donation-tracking-status-refunded {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

.donation-tracking-meta {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--spacing-3) var(--spacing-5);
    margin: 0;
}
.donation-tracking-meta dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold);
}
.donation-tracking-meta dd {
    margin: 0;
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
}
.donation-tracking-message {
    white-space: pre-wrap;
    font-style: italic;
    color: var(--color-text-secondary);
}
@media (max-width: 560px) {
    .donation-tracking-meta {
        grid-template-columns: 1fr;
        gap: var(--spacing-1);
    }
    .donation-tracking-meta dt {
        margin-top: var(--spacing-2);
    }
}

.donation-tracking-project h3 {
    margin: 0 0 var(--spacing-2) 0;
    font-size: var(--font-size-xl);
}
.donation-tracking-project h3 a {
    color: var(--color-text-main);
    text-decoration: none;
}
.donation-tracking-project h3 a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.donation-tracking-country {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-5) 0;
}
.donation-tracking-cycle {
    background-color: var(--color-background-alt);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.donation-tracking-cycle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.donation-tracking-no-updates {
    margin: 0;
    color: var(--color-text-secondary);
    font-style: italic;
}
.donation-tracking-updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
}
.donation-tracking-update {
    margin: 0;
}
.donation-tracking-update img {
    width: 100%;
    border-radius: var(--radius-md);
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
}
.donation-tracking-update figcaption {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.donation-tracking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: center;
    margin-top: var(--spacing-8);
}

/* =========================================================
   PAGE HISTORIQUE
   ========================================================= */
.donation-history-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-8);
}
.donation-history-summary-item {
    background-color: var(--color-white);
    padding: var(--spacing-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--color-border);
}
.donation-history-summary-item strong {
    display: block;
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-bold);
}
.donation-history-summary-item span {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.donation-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.donation-history-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--spacing-5);
    align-items: center;
    background-color: var(--color-white);
    padding: var(--spacing-5) var(--spacing-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.2s ease;
}
.donation-history-item:hover {
    box-shadow: var(--shadow-card-hover);
}
@media (max-width: 768px) {
    .donation-history-item {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
}

.donation-history-item-main h3 {
    margin: 0 0 var(--spacing-1) 0;
    font-size: var(--font-size-lg);
}
.donation-history-item-main h3 small {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
}
.donation-history-date {
    margin: 0 0 var(--spacing-1) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.donation-history-sep {
    margin: 0 var(--spacing-2);
    color: var(--color-text-muted);
}
.donation-history-dedication {
    margin: 0;
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.donation-history-cycle {
    margin: var(--spacing-1) 0 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.donation-history-item-amount {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    align-items: flex-end;
}
.donation-history-item-amount strong {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}
.badge-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.donation-history-empty {
    text-align: center;
    padding: var(--spacing-12);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

/* =========================================================
   PAGE RETRIEVE
   ========================================================= */
.donation-retrieve-form {
    background-color: var(--color-white);
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* =========================================================
   ETAT PENDING (retour Stripe avant webhook)
   ========================================================= */
.donation-pending-card {
    /* Meme style de fond/ombre que .donation-success-card mais ton plus calme */
    position: relative;
}
.donation-pending-spinner {
    background-color: var(--color-primary-light, #eef5ff);
}
.donation-pending-spinner .spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--color-primary);
    animation: sadaqah-spinner-rotate 0.9s linear infinite;
}
@keyframes sadaqah-spinner-rotate {
    to { transform: rotate(360deg); }
}
.donation-pending-info {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3);
}
.donation-pending-subtle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}
.donation-pending-fallback[hidden] {
    display: none;
}

/* Reduire l'animation si le visiteur prefere moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .donation-pending-spinner .spinner {
        animation-duration: 3s;
    }
}