/* ═══════════════════════════════════════════════════════════════════════════
   donation-app.css — Plugin Applications Don Devise Combine
   
   RÈGLE FONDAMENTALE : Aucun sélecteur global (body, form, button, span,
   label, input, P, select...) n'est autorisé ici. Tous les sélecteurs sont
   limités à .container pour éviter tout conflit avec le thème WordPress/Elementor.
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variables and Base Utils ────────────────────────────────────────────── */
:root {
  --primary-color: #596873;
  --primary-color-dark: #4e5d68;
  --success-color: #7DC242;
  --success-color-dark: #6aad36;
  --success-color-light: #f0f9e8;
  --text-light: #fff;
  --transition-speed: 0.3s;
}

/* Animations et Transitions Globales (scopées) */
.container .clickable-btn,
.container .custom-amount,
.container input,
.container select,
.container button {
  transition: all var(--transition-speed) ease;
}

@keyframes fadeInForm {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jms-donation-container,
.container {
  animation: fadeInForm 0.6s ease-out forwards;
}

/* ─── Styles Actifs (Déplacés depuis JS vers CSS) ────────────────────────── */
.container .clickable-btn.active,
.container .custom-amount.active {
  background-color: var(--primary-color) !important;
  color: var(--text-light) !important;
  border-color: var(--success-color) !important;
}

.container .custom-amount.active::placeholder {
  color: var(--text-light) !important;
}

/* ─── Hover boutons montant ──────────────────────────────────────────────── */
.container .clickable-btn {
  border-radius: 8px !important;
}

.container .clickable-btn:hover:not(.active) {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px);
  border-color: #ccc !important;
}

.container .clickable-btn:hover:not(.active) span {
  color: #333333 !important;
}

.container .clickable-btn.active {
  box-shadow: 0 2px 10px rgba(89, 104, 115, 0.25) !important;
  border-radius: 8px !important;
}

/* ─── Bouton de validation premium ───────────────────────────────────────── */
#submitbtn {
  background: linear-gradient(135deg, #596873 0%, var(--primary-color-dark) 100%) !important;
  box-shadow: 0 3px 12px rgba(89, 104, 115, 0.3) !important;
  border-radius: 8px !important;
  border: none !important;
  transition: all 0.25s ease !important;
}

#submitbtn:hover {
  box-shadow: 0 5px 18px rgba(89, 104, 115, 0.4) !important;
  transform: translateY(-1px);
  filter: brightness(1.06);
}

#submitbtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(89, 104, 115, 0.3) !important;
}

/* ─── État Formulaire Valide (Prêt à soumettre) ──────────────────────────── */
#submitbtn.ready-to-submit {
  background: linear-gradient(135deg, #2b3035 0%, #15181a 100%) !important;
  box-shadow: 0 4px 15px rgba(21, 24, 26, 0.4) !important;
}

#submitbtn.ready-to-submit:hover {
  box-shadow: 0 6px 20px rgba(21, 24, 26, 0.5) !important;
  filter: brightness(1.1);
}

/* ─── Focus visible sur champs de saisie ─────────────────────────────────── */
.container input:focus,
.container select:focus,
.container textarea:focus {
  border-color: var(--success-color) !important;
  box-shadow: 0 0 0 3px rgba(125, 194, 66, 0.15) !important;
  outline: none !important;
}

/* ─── Transitions fluides boutons fréquence ──────────────────────────────── */
.container .donation-toggle button {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

.container .donation-toggle button:hover:not(.active) {
  background-color: #e8e8e8 !important;
}

/* ─── Hover icônes paiement ──────────────────────────────────────────────── */
.container .payment-icon {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.container .payment-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ─── Texte sécurité SSL : espacement réduit ─────────────────────────────── */
.container .fieldset-step2 table p {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  color: #555 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.container .fieldset-step2 table {
  margin-top: 5px !important;
}

/* ─── Champ « Montant libre » en pleine largeur & Placeholder Noir ────────── */
.container .custom-amount {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  font-weight: normal !important;
}

.container .custom-amount::placeholder {
  color: #222 !important;
  opacity: 1 !important;
}

.container .custom-amount::-webkit-input-placeholder {
  color: #222 !important;
}

.container .custom-amount::-moz-placeholder {
  color: #222 !important;
  opacity: 1 !important;
}

/* ─── Validation UX (Real-time feedback) ─────────────────────────────────── */
.container .input-valid {
  border-color: var(--success-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(125, 194, 66, 0.25) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.container .input-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* ─── Loading Spinner ─────────────────────────────────── */
.container .spinner-loader {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spinLoader 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes spinLoader {
  to {
    transform: rotate(360deg);
  }
}

.container #submitbtn.loading {
  opacity: 0.8;
  cursor: not-allowed;
}

/* ─── Pulse Animation : Bouton prêt à valider ────────────────────────────── */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(21, 24, 26, 0.4); }
  50% { box-shadow: 0 4px 25px rgba(21, 24, 26, 0.6); }
}

.container #submitbtn.ready-to-submit {
  animation: subtlePulse 2s ease-in-out infinite;
}

.container #submitbtn.ready-to-submit:hover {
  animation: none;
}

/* ─── Boutons montant améliorés ──────────────────────────────────────────── */
.container .clickable-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 600 !important;
}

.container .clickable-btn.active {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(89, 104, 115, 0.35) !important;
}

/* ─── Contrastes texte améliorés ─────────────────────────────────────────── */
.container .jms-label {
  color: #444 !important;
}

.container .jms-comment-box::placeholder {
  color: #888 !important;
}


/* ─── Media query tablette (550px–960px) ────────────────────────────────────
   Tous les sélecteurs sont préfixés par .container pour ne pas toucher
   le header/footer/menu du thème.
─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 550px) and (max-width: 960px) {
  .container form { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container .section-title { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container button { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container label { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  /* span scopé sous .container uniquement (ne touche PAS les spans du header) */
  .container span { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container select { font-size: clamp(15px, 3vw, 18px) !important;
    height: 60px !important;
  }

  .container .fieldset-step2 #c-email::before {
    top: 35px !important;
  }

  .container .zc-input-wrapper::after {
    font-size: 17px !important;
  }

  .container .fieldset-step2.payments {
    width: 100%;
  }

  .container .validation-message { font-size: clamp(15px, 3vw, 18px) !important;
  }

  .jms-donation-container {
    max-width: 90% !important;
  }

  .container #submitbtn { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container input { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container #submitbtn-btn { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container .form-group select { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container .jms-comment-box { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container p { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container .jms-container-donation .jms-amount-div input {
    width: 100%;
  }

  .container .jms-card-header { font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  .container #submitbtn-btn img {
    width: 30px !important;
  }

  .container .jms-container-donation .jms-amount-div {
    width: 100% !important;
  }

  /* Neutraliser l'override font-size sur les spans internes des checkboxes */
  .container .checkbox span,
  .container .checkbox span::after,
  .container .checkbox::after {
    font-size: inherit !important;
  }

  /* Fix tablette : selects CIVILITÉ et PAYS en pleine largeur */
  .container #c-title select,
  .container #c-country select {
    width: 100% !important;
    height: 55px !important; font-size: clamp(16px, 3.5vw, 20px) !important;
    box-sizing: border-box !important;
  }

  .container #c-title,
  .container #c-country {
    width: 100% !important;
  }

  /* Fix tablette : espacement texte déduction fiscale */
  .container .tax-info {
    line-height: 1.5 !important;
    padding: 15px 0 !important;
  }

  /* Fix tablette : icône SVG bouton de paiement */
  .container #submitbtn svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ─── CORRECTION CHECKBOX - Affichage coche noire ───────────────────────────
   Le <span> est sorti du flux de texte (position:absolute) et superposé
   sur le carré de la case à cocher. Le ✓ Unicode est plus fiable que le SVG.
─────────────────────────────────────────────────────────────────────────── */

/* Span positionné en absolu sur le carré → hors du flux de texte */
.checkbox span {
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  z-index: 101 !important;
}

/* Coche cachée par défaut */
.checkbox span::after {
  content: "" !important;
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  line-height: 16px !important;
  background-image: none !important;
}

/* Coche visible quand cochée — utilisant un SVG encodé (plus propre) ou un design CSS pur */
.checkbox input:checked+span {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
}

.checkbox input:checked+span::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 5px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid white !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  background-image: none !important;
}

/* --- Validation Erreurs --- */
.container .input-error, .input-error, .don-devise-page .input-error {
    border: 2px solid #dc3545 !important;
    background-color: #fff8f8 !important;
}

/* ─── Ajustement Padding Bouton Validation ───────────────────────────
   Alignement "Je valide mon paiement de 100€" sur une seule ligne 
   pour "Je donne une fois" sur ordinateur (> 960px) 
─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 961px) {
    #submitbtn.is-onetime,
    #submitbtn.is-monthly {
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
        width: calc(100% + 40px) !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        font-size: clamp(14px, 1.4vw, 17px) !important;
        overflow: hidden !important;
    }
    #submitbtn.is-onetime svg,
    #submitbtn.is-monthly svg {
        margin-left: 4px !important;
        width: 18px !important;
        height: 18px !important;
    }
    #submitbtn.is-onetime span,
    #submitbtn.is-monthly span {
        white-space: nowrap !important;
    }
}

/* ======================================================== */
/* STICKY BANNER MOBILE (TOTAL DON)                         */
/* ======================================================== */

#dzc-sticky-banner {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    background-color: #1a2634;
    color: var(--text-light, #fff);
    text-align: left;
    padding: 14px 24px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 700;
    z-index: 9999;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
    transition: bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: none;
    font-family: inherit;
    cursor: pointer;
}
@media screen and (max-width: 1366px) {
    #dzc-sticky-banner {
        display: block !important;
        z-index: 99999 !important;
    }
}
#dzc-sticky-banner.visible {
    bottom: 0px;
}
#dzc-sticky-banner span {
    color: var(--success-color, #7DC242);
}

/* Validation Feedback (Green Success) for Inputs */
.is-valid {
    border-color: #28a745 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: 38px !important;
}
/* Shake Error Animation */
@keyframes dzc-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}
.dzc-shake {
    animation: dzc-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
/* Styling for Tax Info to match application-don-combine-plugin */
.tax-info {
    font-size: 15px !important;
    font-weight: normal !important;
}
#tax {
    color: #7DC242 !important;
    font-weight: bold !important;
}

/* --- Tablet Scale Overrides Requested by User (March 20) --- */
.jms-comment-box-section .jms-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #anonymous-tooltip-message, .checkbox-text, .checkbox-text2, label { font-size: 20px !important; }
    .container label.checkbox { font-size: 22px !important; padding-left: 38px !important; min-height: 30px !important; }
    .container .checkbox::after { width: 24px !important; height: 24px !important; }
    .container .checkbox span { width: 26px !important; height: 26px !important; }
    .container .checkbox input:checked+span::after { top: 2px !important; left: 8px !important; width: 7px !important; height: 14px !important; border-width: 0 3px 3px 0 !important; }
    .container #info-icon-anonymous { width: 24px !important; height: 24px !important; line-height: 24px !important; font-size: 14px !important; }
    .container h2.section-title, .container .section-title { font-size: 26px !important; }
    .payment_mode_title, .donation-toggle button { font-size: 24px !important; }
    .fieldset-step2 p, .tax-info { font-size: 21px !important; line-height: 1.5 !important; }
    .jms-comment-box-section .jms-label { font-size: 20px !important; }
    fieldset label { font-size: 20px !important; }
    
    .info-icon, .heart { width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 19px !important; }
    #submitbtn img { width: 26px !important; height: 26px !important; }
    
    /* Bank cards exact trace matches */
    img[alt="Mastercard"], img[alt="Visa"], img[alt="CB"] {
        height: 60px !important;
        width: 90px !important;
    }
    
    /* Payment buttons icon size inline fix override */
    .payment-icon img {
        height: 40px !important;
        width: auto !important;
    }
}

/* --- Corrected Tablet Bank Cards & SSL Text (March 20 Patch 2) --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Unify sizes for all 3 cards so they align properly horizontally */
    img[alt="Mastercard"], img[alt="Visa"], img[alt="Carte Bleue"] { 
        height: 55px !important; 
        width: auto !important;
        margin: 0 5px !important;
        object-fit: contain !important;
    }
    
    /* Ensure the container natively aligns them to the middle if heights differ intrinsically */
    div[style*="gap:5px"] {
        align-items: center !important;
    }
    
    /* Significantly scale up SSL security paragraph as requested */
    .container .fieldset-step2 table tr td p,
    .container .fieldset-step2 table p {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }
}

/* --- Global Base Sizing for the SSL Class --- */
.ssl-secure-text { font-size: 12px; line-height: 1.15; }

/* --- Final Tablet Structural Overrides Requested by User (March 20 Patch 4) --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Scale texts */
    .container .ssl-secure-text,
    .container .fieldset-step2 table p {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }
    
    /* Lock the payment button widths so flex expansion drops, securing the active checkmark icon. */
    .payment-icon.clickable-div {
        flex: none !important;
        width: 150px !important;
        margin: 0 10px 20px 10px !important;
    }
}
/* --- Tablet: Reduction taille police Total Don sticky banner (March 23) --- */
@media only screen and (min-width: 550px) and (max-width: 1024px) {
    /* Banniere sticky Total Don : 0euro - texte, montant et symbole euro */
    #dzc-sticky-banner {
        font-size: 15px !important;
    }
    #dzc-sticky-banner #dzc-sticky-amount {
        font-size: 15px !important;
    }
    #dzc-sticky-banner .dzc-currency {
        font-size: 15px !important;
    }
}