/* =============================================================
   Formulaire de Satisfaction — CSS personnalisable
   Ce fichier recense toutes les classes utilisées en front-office.
   Copiez-le dans votre thème enfant via le bouton prévu dans le BO,
   puis surchargez librement les styles ci-dessous.
   Le fichier du thème enfant prend la priorité sur celui du plugin.
   ============================================================= */


/* ---------------------------------------------------------------
   Overlay (fond flouté derrière la modale)
--------------------------------------------------------------- */
#fs-overlay { }
#fs-overlay.fs-visible { }
#fs-overlay.fs-no-blur { }


/* ---------------------------------------------------------------
   Modale — conteneur principal (modes flottants)
--------------------------------------------------------------- */
#fs-modal { }
#fs-modal.fs-visible { }
#fs-modal.fs-anim-slide-up { }
#fs-modal.fs-anim-slide-right { }
#fs-modal.fs-anim-popup { }


/* ---------------------------------------------------------------
   Mode inline (formulaire inséré dans le contenu)
--------------------------------------------------------------- */
#fs-inline-wrapper {max-width: 450px;}
#fs-inline-wrapper.fs-visible { }


/* ---------------------------------------------------------------
   Carte (conteneur du formulaire à l'intérieur de la modale)
--------------------------------------------------------------- */
.fs-card { }


/* ---------------------------------------------------------------
   Bouton de fermeture (croix)
--------------------------------------------------------------- */
.fs-close { }
.fs-close:hover { }


/* ---------------------------------------------------------------
   Panel Question (écran initial)
--------------------------------------------------------------- */
#fs-panel-question {}

.fs-question {
   text-align: center;
   padding-right: 0px;
   color: #575756;
}

.fs-question::before {
   content: '';
   display: inline-block;
   width: 22px;
   height: 22px;
   background-image: url('/wp-content/themes/oaka-divi-extensions/images/crayon.svg');
   background-repeat: no-repeat;
   background-size: contain;
   vertical-align: middle;
   margin-right: 10px;
}

/* ---------------------------------------------------------------
   Boutons Oui / Non
--------------------------------------------------------------- */
.fs-actions {
   width: 80%;
   margin: auto;
}
.fs-btn { }
.fs-btn:active { }

.fs-btn--yes {
   padding: 7px 10px;
   transition: ease 0.3s all;
}
.fs-btn--yes:hover {
   background-color: #fa4641;
   border-color: #fa4641;
}

.fs-btn--no {
   padding: 7px 10px;
   transition: ease 0.3s all;
}
.fs-btn--no:hover {
   border-color: #fa4641;
   color: #fa4641;
   background-color: #FFF;
}


/* ---------------------------------------------------------------
   Panel des raisons (affichées après clic sur "Non")
--------------------------------------------------------------- */
#fs-panel-no { }

.fs-reasons-hint {
   font-size: 16px;
   font-weight: 500;
   color: #000;
   text-align: center;
   margin-bottom: 20px;
}

.fs-reasons-list-fo {margin-bottom: 20px;}
.fs-reasons-list-fo li { }
.fs-reasons-list-fo li label {
   font-weight: 400;
}
.fs-reasons-list-fo input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  border-radius: 50% !important;
  border: 1px solid #666 !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

.fs-reasons-list-fo input[type="checkbox"]:checked {
  background: white !important;
  border: 1px solid #fa4641 !important;
  box-shadow: inset 0 0 0 3px white, inset 0 0 0 9px #fa4641;
}

.fs-reasons-list-fo input[type="checkbox"]:checked::after {
  display: none; /* Plus besoin du ::after */
}


/* ---------------------------------------------------------------
   Commentaire libre (optionnel, sous chaque raison cochée)
--------------------------------------------------------------- */
.fs-reason-comment-wrap { }
.fs-reason-comment {min-height: 120px;}


/* ---------------------------------------------------------------
   Footer (bouton envoyer + retour + message d'erreur)
--------------------------------------------------------------- */
.fs-no-footer { }

.fs-btn--send {
   margin: auto;
   padding: 5px 19px;
}
.fs-btn--send:hover { }
.fs-btn--send:active { }

.fs-btn--back {
   display: none;
}
.fs-btn--back:hover { }

.fs-error-msg { }


/* ---------------------------------------------------------------
   Panel de confirmation (merci)
--------------------------------------------------------------- */
#fs-panel-thanks { }
.fs-thanks { }
.fs-thanks__icon {
   display: none;
}

.fs-thanks__message {
   font-weight: 500;
}


/* ---------------------------------------------------------------
   Overlay de chargement (pendant la soumission AJAX)
--------------------------------------------------------------- */
.fs-loading-overlay { }
.fs-loading-overlay.fs-loading-visible { }
.fs-loading-spinner { }


/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 560px) {
    /* surcharges responsive ici */
}