/* ==========================================================================
   FSH — Tunnel de dons
   Étape 1 (sélection du projet) : reprise fidèle de la maquette fournie.
   Le reste du tunnel (montant, identité, adresse, paiement) est le widget
   RaiseNow Tamaro : voir la section "TAMARO — best effort" en bas de fichier
   pour ce qui peut / ne peut pas être stylé depuis ce CSS.
   ========================================================================== */

.fsh-td {
  /* Variables personnalisables depuis Réglages → section 8, ou via les attributs
     du shortcode [fsh_tunnel_dons] (bg_color, text_color, text_hover_color,
     button_color, button_hover_color, border_color, border_radius, button_size, font_size). */
  --fsh-red-tint: #fdebeb;
  --fsh-red-tint-2: #fbe0e0;
  --n50: #fafafa;
  --n100: #f5f5f6;
  --n200: #e4e4e6;
  --n300: #d2d2d5;
  --n400: #a3a3a8;
  --n500: #76767c;
  --n600: #56565b;
  --n700: #3a3a3e;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Plus Jakarta Sans", Arial, sans-serif;
  font-size: var(--td-font-size, 14px);
  color: var(--td-text, #161616);
  background: var(--td-bg, transparent);
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}
.fsh-td *,
.fsh-td *::before,
.fsh-td *::after { box-sizing: border-box; }

/* progress bar */
.fsh-td-top { margin-bottom: 6px; }
.fsh-td-progress .pp {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px;
}
.fsh-td-progress .lbl { font-size: .85em; font-weight: 600; color: var(--n600); }
.fsh-td-progress .cnt { font-family: ui-monospace, monospace; font-size: .8em; color: var(--n500); }
.fsh-td-bar { height: 6px; border-radius: 999px; background: var(--n200); overflow: hidden; }
.fsh-td-bar i { display: block; height: 100%; border-radius: 999px; background: var(--td-btn-bg, #cc0000); transition: width .3s; }

.fsh-td-h2 { font-size: 1.55em; font-weight: 800; letter-spacing: -.01em; margin: 1.1em 0 .3em; color: var(--td-text, #161616); }
.fsh-td-lede { font-size: 1em; color: var(--n500); margin: 0 0 1.1em; }

/* search */
.fsh-td-search {
  display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--td-border, var(--n200)); border-radius: var(--td-radius, 12px);
  padding: .8em .9em; margin-bottom: 1em; background: var(--n50);
}
.fsh-td-search svg { stroke: var(--n400); flex: 0 0 auto; }
.fsh-td-search input {
  border: none; background: none; outline: none; font-size: 1em; width: 100%; color: var(--td-text, #161616);
}

/* grid of project cards */
.fsh-td-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) {
  .fsh-td-grid { grid-template-columns: 1fr 1fr; }
}

.fsh-td-card {
  display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--td-border, var(--n200)); border-radius: var(--td-radius, 14px);
  padding: .9em 1em; background: var(--td-bg, #fff); cursor: pointer; position: relative; transition: .15s;
  min-height: 56px; color: var(--td-text, #161616);
}
.fsh-td-card:hover { border-color: var(--td-text-hover, var(--n300)); }
.fsh-td-card:focus-visible { outline: 2px solid var(--td-btn-bg, #cc0000); outline-offset: 2px; }
.fsh-td-card .ico {
  width: 38px; height: 38px; border-radius: calc(var(--td-radius, 14px) * .8); background: var(--n100);
  display: grid; place-items: center; flex: 0 0 auto; color: var(--td-btn-bg, #cc0000);
}
.fsh-td-card .txt b { display: block; font-size: 1em; font-weight: 700; color: var(--td-text, #161616); line-height: 1.2; }
.fsh-td-card .txt span { display: block; font-size: .82em; color: var(--n500); margin-top: 2px; line-height: 1.3; }
.fsh-td-card .tick {
  position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--n300); display: grid; place-items: center; background: #fff; color: #fff;
}
.fsh-td-card[aria-checked="true"] {
  border-color: var(--td-btn-bg, #cc0000); border-width: 2px; background: var(--fsh-red-tint);
  box-shadow: 0 6px 16px -10px rgba(204, 0, 0, .5);
}
.fsh-td-card[aria-checked="true"] .ico { background: var(--fsh-red-tint-2); }
.fsh-td-card[aria-checked="true"] .tick { background: var(--td-btn-bg, #cc0000); border-color: var(--td-btn-bg, #cc0000); }

.fsh-td-noresult { color: var(--n500); font-size: .95em; padding: 20px 4px; text-align: center; }

/* CTA button */
.fsh-td-btn {
  width: 100%; margin-top: 18px; border: none; border-radius: var(--td-radius, 13px); background: var(--n200);
  color: var(--n500); font-weight: 700; font-size: 1.05em; padding: var(--td-btn-size, 15px) calc(var(--td-btn-size, 15px) + 1px); cursor: not-allowed;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: .15s;
}
.fsh-td-btn:not(:disabled) {
  background: var(--td-btn-bg, #cc0000); color: #fff; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(204, 0, 0, .55);
}
.fsh-td-btn:not(:disabled):hover { background: var(--td-btn-hover, #a30000); }

/* back link on step 2 */
.fsh-td-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: .95em; font-weight: 600; color: var(--n600);
  background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 14px;
}
.fsh-td-back:hover { color: var(--td-text-hover, var(--td-btn-bg, #cc0000)); }

/* ==========================================================================
   TAMARO — best effort
   RaiseNow rend le widget Tamaro dans son propre balisage HTML (que nous ne
   contrôlons pas et qui peut changer d'une version à l'autre). L'essentiel
   du thème (couleurs de marque, police, boutons) se règle normalement dans
   RaiseNow Hub (Réglages du widget > Branding). Ce bloc ne fait qu'un
   ajustement minimal du conteneur : à affiner via l'inspecteur du navigateur
   une fois le widget réellement affiché sur test.fsh.ngo.
   ========================================================================== */
.fsh-td-step-tamaro { min-height: 200px; }
#fsh-td-tamaro-container { font-family: inherit; }

/* Mode "Tamaro seul" : le plugin ne fournit qu'un conteneur, tout le style
   visible vient soit de RaiseNow Hub, soit du CSS personnalisé (section 6
   des réglages), soit de vos propres règles ciblant le DOM réel de Tamaro. */
.fsh-td--tamaro-only #fsh-td-tamaro-container { min-height: 200px; }

/* sélecteur de campagne dans le tunnel complet (étape 1) */
.fsh-td-campaign-picker { margin-top: 14px; border-top: 1px solid var(--td-border, var(--n200)); padding-top: 14px; }
.fsh-td-campaign-label { font-size: .95em; font-weight: 700; margin: 0 0 8px; color: var(--td-text, #161616); }
.fsh-td-campaign-radio { display: flex; align-items: center; gap: 8px; font-size: .95em; padding: 7px 2px; cursor: pointer; }
.fsh-td-campaign-radio:hover { color: var(--td-text-hover, var(--td-btn-bg, #cc0000)); }
.fsh-td-campaign-select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--td-border, var(--n200)); border-radius: var(--td-radius, 10px); font-size: 1em; background: #fff; }


/* ==========================================================================
   Mini-formulaire de don par projet  ([fsh_don])  — reprend Model-1
   Personnalisable via variables CSS --fmd-* (posées en style="" inline par
   PHP, à partir des réglages "Apparence" ou des attributs du shortcode).
   ========================================================================== */
.fsh-mini-donate {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fmd-font-size, 14px);
  max-width: 360px;
  margin: 0 auto;
  border: 1px solid var(--fmd-border, #d8dadd);
  border-radius: var(--fmd-radius, 10px);
  background: var(--fmd-bg, #fff);
  color: var(--fmd-text, #1a1a1a);
  padding: 1.4em 1.4em 1.1em;
  box-sizing: border-box;
}
.fsh-mini-donate *, .fsh-mini-donate *::before, .fsh-mini-donate *::after { box-sizing: border-box; }

.fmd-title {
  text-align: center; font-size: .95em; font-weight: 700; letter-spacing: .12em;
  color: var(--fmd-text, #1e3a5f); text-transform: uppercase; margin: 0 0 1.1em;
}

.fmd-toggle {
  display: flex; border: 1px solid var(--fmd-btn-bg, #1a1a1a); border-radius: var(--fmd-radius, 6px); overflow: hidden; margin-bottom: 1em;
}
.fmd-toggle-btn {
  flex: 1; padding: .7em .55em; font-size: .95em; font-weight: 600; border: none; background: var(--fmd-bg, #fff);
  color: var(--fmd-text, #1a1a1a); cursor: pointer;
}
.fmd-toggle-btn.is-active { background: var(--fmd-btn-bg, #1a1a1a); color: #fff; }

.fmd-campaign {
  width: 100%; padding: .75em .85em; margin-bottom: .85em; border: 1px solid var(--fmd-border, #d8dadd);
  border-radius: var(--fmd-radius, 6px); background: rgba(0,0,0,.03); font-size: .95em; color: var(--fmd-text, #1a1a1a);
}

.fmd-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; margin-bottom: .7em; }
.fmd-amount-btn {
  padding: .8em .3em; border: 1px solid var(--fmd-border, #d8dadd); border-radius: var(--fmd-radius, 6px); background: var(--fmd-bg, #fff);
  font-size: 1em; font-weight: 600; color: var(--fmd-text, #1a1a1a); cursor: pointer; transition: .12s;
}
.fmd-amount-btn:hover { border-color: var(--fmd-btn-hover, var(--fmd-btn-bg, #1a1a1a)); }
.fmd-amount-btn.is-active { border-color: var(--fmd-btn-bg, #1a1a1a); border-width: 2px; background: rgba(0,0,0,.03); }

.fmd-custom {
  display: flex; align-items: center; border: 1px solid var(--fmd-border, #d8dadd); border-radius: var(--fmd-radius, 6px);
  margin-bottom: 1em; overflow: hidden;
}
.fmd-custom span { padding: .75em .7em; background: rgba(0,0,0,.03); font-size: .9em; color: #8a8f97; border-right: 1px solid var(--fmd-border, #d8dadd); }
.fmd-custom input { flex: 1; border: none; padding: .75em .7em; font-size: .95em; outline: none; background: transparent; color: var(--fmd-text, #1a1a1a); }

.fmd-submit {
  width: 100%; padding: 1em; border: none; border-radius: var(--fmd-radius, 6px); background: var(--fmd-btn-bg, #1a1a1a); color: #fff;
  font-size: 1em; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: .12s;
}
.fmd-submit:hover { background: var(--fmd-btn-hover, #000); }

.fmd-footnote { text-align: center; font-size: .75em; color: #a3a3a8; margin: .9em 0 0; }


/* ==========================================================================
   Modale de finalisation (Tamaro / Solution) déclenchée depuis
   le mini-formulaire ou la barre sticky
   ========================================================================== */
.fsh-don-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.fsh-don-modal.is-open { display: block; }
.fsh-don-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 22, .55); }
.fsh-don-modal-panel {
  position: relative; max-width: 560px; margin: 4vh auto; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 12px; padding: 28px 22px 22px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.4);
}
.fsh-don-modal-close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: none; background: none;
  font-size: 22px; line-height: 1; color: #76767c; cursor: pointer; border-radius: 50%;
}
.fsh-don-modal-close:hover { background: #f0f0f1; }
body.fsh-don-modal-open { overflow: hidden; }


/* ==========================================================================
   Barre "Quick Donate" (Model-2) — [quick_donate] et/ou affichage automatique
   Personnalisable via variables CSS --fmd-* (posées en style="" inline par
   PHP). .fsh-quick-donate--fixed = collée en bas d'écran (comportement
   d'origine) ; .fsh-quick-donate--static = bloc normal dans le flux de page.
   ========================================================================== */
.fsh-quick-donate {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fmd-font-size, 13px);
  color: var(--fmd-text, #56565b);
}

.fsh-quick-donate--fixed {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99000;
  background: var(--fmd-bg, #f4f5f6); border-top: 1px solid var(--fmd-border, #d8dadd); padding: .75em 1.2em;
  transition: transform .25s ease;
}
.fsh-quick-donate--fixed.is-dismissed { transform: translateY(110%); }

.fsh-quick-donate--static {
  background: var(--fmd-bg, #f4f5f6); border: 1px solid var(--fmd-border, #d8dadd); border-radius: var(--fmd-radius, 8px);
  padding: 1em 1.2em;
}

.fsh-sticky-close {
  position: absolute; top: 6px; right: 10px; border: none; background: none; font-size: 18px;
  color: #76767c; cursor: pointer; line-height: 1; padding: 4px;
}
.fsh-quick-donate--static .fsh-sticky-close { display: none; }

.fsh-sticky-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.fsh-quick-donate--fixed .fsh-sticky-inner { padding-right: 24px; }
.fsh-sticky-label { font-size: .85em; font-weight: 700; letter-spacing: .08em; color: inherit; white-space: nowrap; }

.fsh-sticky-inner .fmd-toggle { margin-bottom: 0; width: auto; flex: 0 0 auto; border-color: var(--fmd-btn-bg, #1a1a1a); }
.fsh-sticky-inner .fmd-toggle-btn { padding: .6em .9em; font-size: .95em; background: var(--fmd-bg, #fff); color: var(--fmd-text, #1a1a1a); }
.fsh-sticky-inner .fmd-toggle-btn.is-active { background: var(--fmd-btn-bg, #1a1a1a); }
.fsh-sticky-inner .fmd-campaign,
.fsh-sticky-inner .fmd-project-select {
  padding: .6em .75em; font-size: .95em; border: 1px solid var(--fmd-border, #d8dadd); border-radius: var(--fmd-radius, 6px); background: #fff; min-width: 140px;
}
.fsh-sticky-inner .fmd-amounts { display: flex; gap: 6px; margin-bottom: 0; flex-wrap: wrap; }
.fsh-sticky-inner .fmd-amount-btn {
  padding: .6em .9em; font-size: .95em; white-space: nowrap; border: 1px solid var(--fmd-border, #d8dadd);
  border-radius: var(--fmd-radius, 6px); background: #fff; color: var(--fmd-text, #1a1a1a); cursor: pointer;
}
.fsh-sticky-inner .fmd-amount-btn:hover { border-color: var(--fmd-btn-hover, var(--fmd-btn-bg, #1a1a1a)); }
.fsh-sticky-inner .fmd-amount-btn.is-active { border-color: var(--fmd-btn-bg, #1a1a1a); border-width: 2px; }
.fsh-sticky-inner .fmd-custom {
  margin-bottom: 0; width: 130px; border: 1px solid var(--fmd-border, #d8dadd); border-radius: var(--fmd-radius, 6px);
  display: flex; align-items: center; overflow: hidden;
}
.fsh-sticky-inner .fmd-custom span { padding: .6em; font-size: .85em; background: rgba(0,0,0,.03); }
.fsh-sticky-inner .fmd-custom input { padding: .6em; font-size: .95em; width: 60px; border: none; background: transparent; }
.fsh-sticky-inner .fmd-submit {
  width: auto; padding: .7em 1.5em; font-size: .95em; white-space: nowrap; border: none;
  border-radius: var(--fmd-radius, 6px); background: var(--fmd-btn-bg, #1a1a1a); color: #fff; font-weight: 700; cursor: pointer;
}
.fsh-sticky-inner .fmd-submit:hover { background: var(--fmd-btn-hover, #000); }

.fsh-sticky-fab { display: none; }

@media (max-width: 767px) {
  .fsh-quick-donate--fixed { padding: 0; background: none; border: none; }
  .fsh-quick-donate--fixed .fsh-sticky-inner {
    position: fixed; left: 0; right: 0; bottom: 0; background: var(--fmd-bg, #f4f5f6); border-top: 1px solid var(--fmd-border, #d8dadd);
    padding: 16px 16px 20px; flex-direction: column; align-items: stretch; transform: translateY(100%);
    transition: transform .25s ease; max-height: 80vh; overflow-y: auto;
  }
  .fsh-quick-donate--fixed.is-drawer-open .fsh-sticky-inner { transform: translateY(0); }
  .fsh-quick-donate--fixed .fsh-sticky-inner .fmd-amounts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .fsh-quick-donate--fixed .fsh-sticky-close { top: 8px; right: 8px; }

  .fsh-quick-donate--fixed .fsh-sticky-fab {
    display: block; position: fixed; right: 16px; bottom: 16px; z-index: 99001;
    background: var(--fmd-btn-bg, #1a1a1a); color: #fff; border: none; border-radius: 999px; padding: 14px 22px;
    font-size: 13px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); cursor: pointer;
  }
  .fsh-quick-donate--fixed.is-dismissed .fsh-sticky-fab { display: none; }
}