/* ========================================
   IMPORT DES VARIABLES CSS CENTRALISÉES
   ======================================== */
@import url('./variables.css');

/* ========================================
   CONTEXTE / WRAPPER DU FORMULAIRE
   ======================================== */
.gform_wrapper,
.gform_wrapper.gravity-theme {
  font-family: var(--luzalya-font-family);
  max-width: 760px;
  margin: auto;
  background: var(--luzalya-white);
  padding: 30px;
  color: var(--luzalya-text-dark);
  border-radius: var(--luzalya-border-radius-large);
}

/* ========================================
   TITRES / DESCRIPTIONS / LABELS
   ======================================== */
.gform_title {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--luzalya-tex);
}
.gform_description {
  color: var(--luzalya-text);
  margin-bottom: 18px;
}

.gfield_label {
  font-weight: 500 !important;
  color: var(--luzalya-text-dark) !important;
  margin-bottom: 8px  !important;
  font-size: 0.9rem !important;
}

.gform-field-label a,
.gfield_label a {
  color: var(--luzalya-primary) !important;
}

.gform-field-label a:hover,
.gfield_label a:hover {
  color: var(--luzalya-primary-dark) !important;
}

.gfield_description,
.gfield_description.gfield_validation_message {
  font-size: .9rem;
  color: var(--luzalya-text);
}

/* ========================================
   CHAMPS (inputs / textarea / selects)
   ======================================== */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  border: 1.5px solid var(--luzalya-border);
  border-radius: var(--luzalya-border-radius-small);
  background: var(--luzalya-white);
  padding: 10px;
  line-height: 1.4;
  color: var(--luzalya-text);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  appearance: none;
}

/* ÉTATS : hover / focus champs */
.gform_wrapper input:hover,
.gform_wrapper textarea:hover,
.gform_wrapper select:hover {
  border-color: var(--luzalya-primary);
  box-shadow: var(--luzalya-shadow);
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: var(--luzalya-primary);
  box-shadow: var(--luzalya-shadow);
}

/* PLACEHOLDER */
.gform_wrapper ::placeholder {
  color: var(--luzalya-text-light);
}

/* SELECTS : chevron custom */
.gform_wrapper select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--luzalya-primary) 50%),
    linear-gradient(135deg, var(--luzalya-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  transition: background 0.2s ease; /* pour un effet smooth */
}

/* ========================================
   RADIOS & CHECKBOXES
   ======================================== */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
  accent-color: var(--luzalya-primary);
}

.gform_wrapper .gfield_radio li,
.gform_wrapper .gfield_checkbox li {
  margin-bottom: 10px;
}
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
  cursor: pointer;
}

/* ========================================
   SECTIONS (apparence générale)
   ======================================== */
.gform_wrapper .gsection{
  border: none !important;
  background: none;
  border-radius: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gform_wrapper .gsection h3{
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  margin :0;
  line-height: 1;
}

/* ========================================
   DATEPICKER (jQuery UI)
   ======================================== */
.gform_wrapper .date-calendar {
  width: 50%;
}
/* En-tête du calendrier (aligné sur Amelia) */
body .ui-datepicker .ui-datepicker-header {
  background: var(--luzalya-white) !important;
  color: var(--luzalya-text-dark) !important;
  border-radius: var(--luzalya-border-radius-large) var(--luzalya-border-radius-large) 0 0 !important;
}
body .ui-datepicker .ui-datepicker-title {
  font-weight: 600 !important;
  color: var(--luzalya-text-dark) !important;
}

/* Boutons prev/next (hover proche Amelia) */
body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
  cursor: pointer !important;
}
body .ui-datepicker .ui-datepicker-prev:hover,
body .ui-datepicker .ui-datepicker-next:hover {
  background: var(--luzalya-secondary-light) !important;
  border-radius: var(--luzalya-border-radius-small) !important;
}

/* Cellules: padding et rayon pour un look "carte" */
body .ui-datepicker .ui-datepicker-calendar td a.ui-state-default {
  padding: 0.5em 0.2em !important;
  border-radius: var(--luzalya-border-radius-small) !important;
  border: 1px solid transparent !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  color: var(--luzalya-text) !important;
}

/* Hover jour (proche Amelia) */
body .ui-datepicker .ui-datepicker-calendar td a.ui-state-hover,
body .ui-datepicker .ui-datepicker-calendar td a:hover {
  background: var(--luzalya-secondary-light) !important;
  border-color: var(--luzalya-primary-light) !important;
}

/* Jour sélectionné (border accent comme Amelia) */
body .ui-datepicker .ui-state-active {
  background: var(--luzalya-white) !important;
  color: var(--luzalya-text-dark) !important;
  border: 1px solid var(--luzalya-primary-light) !important;
  box-shadow: none !important;
}

/* Jour "aujourd'hui" (subtil) */
body .ui-datepicker .ui-state-highlight {
  background: var(--luzalya-secondary-light) !important;
  color: var(--luzalya-text-dark) !important;
  border: 1px solid var(--luzalya-border) !important;
}

/* Jours désactivés (fond doux, comme Amelia disabled) */
body .ui-datepicker .ui-datepicker-unselectable .ui-state-disabled {
  background: var(--luzalya-secondary-light) !important;
  color: var(--luzalya-text-light) !important;
  opacity: 1 !important;
}

/* Selects mois/année du datepicker (style Amelia) */
body .ui-datepicker select.ui-datepicker-month,
body .ui-datepicker select.ui-datepicker-year {
  color: var(--luzalya-text-dark) !important;
  background: var(--luzalya-white) url("data:image/svg+xml;utf8,<svg fill='%23437e63' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center !important;
  background-size: 16px 16px !important;
  border: 1px solid var(--luzalya-border) !important;
  border-radius: var(--luzalya-border-radius-small) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin: 0 4px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

body .ui-datepicker select.ui-datepicker-month:hover,
body .ui-datepicker select.ui-datepicker-year:hover {
  color: var(--luzalya-text-dark) !important;
  background: var(--luzalya-white) url("data:image/svg+xml;utf8,<svg fill='%23437e63' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center !important;
  background-size: 16px 16px !important;
  border: 1px solid var(--luzalya-border) !important;
  border-radius: var(--luzalya-border-radius-small) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin: 0 4px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

body .ui-datepicker select.ui-datepicker-month:focus,
body .ui-datepicker select.ui-datepicker-year:focus {
  background: var(--luzalya-white) url("data:image/svg+xml;utf8,<svg fill='%23437e63' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center !important;
  background-size: 16px 16px !important;
  outline: none !important;
  border-color: var(--luzalya-primary) !important;
  box-shadow: var(--luzalya-shadow) !important;
}

body .ui-datepicker select.ui-datepicker-month option,
body .ui-datepicker select.ui-datepicker-year option {
  color: var(--luzalya-text) !important;
  background: var(--luzalya-white) !important;
  padding: 4px 8px !important;
}

body .ui-datepicker select.ui-datepicker-month option:hover,
body .ui-datepicker select.ui-datepicker-year option:hover {
  background: var(--luzalya-secondary-light) !important;
  color: var(--luzalya-text-dark) !important;
}

body .ui-datepicker .ui-datepicker-calendar td a{
  padding: 0.5em 0.2em !important;
}

/* Conteneur principal du datepicker (style Amelia) */
body .ui-datepicker {
  background: var(--luzalya-white) !important;
  border: 1px solid var(--luzalya-border) !important;
  border-radius: var(--luzalya-border-radius-large) !important;
  box-shadow: var(--luzalya-shadow) !important;
  font-family: var(--luzalya-font-family) !important;
  padding: 8px !important;
}

/* Masquer chevrons natifs et ajouter chevron custom */
body .ui-datepicker select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: var(--luzalya-white) url("data:image/svg+xml;utf8,<svg fill='%23437e63' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 8px center !important;
  background-size: 12px 12px !important;
  padding-right: 28px !important;
}

/* ========================================
   RADIOS/CHECKBOXES CUSTOM (masquage natif + label bloc)
   ======================================== */
/* Masquer le cercle natif mais garder l'input accessible */
body .gform_wrapper .gfield_radio input.gfield-choice-input,
body .gform_wrapper .gfield_checkbox input.gfield-choice-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Label bloc full width */
body .gform_wrapper .gfield_radio label:not(.label-in-checkbox label),
body .gform_wrapper .gfield_checkbox label:not(.label-in-checkbox label) {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--luzalya-border);
  border-radius: var(--luzalya-border-radius-large);
  cursor: pointer;
  background: var(--luzalya-secondary-light);
  transition: all 0.25s ease;
  box-sizing: border-box;
  margin: 0;
}

/* Hover */
body .gform_wrapper .gfield_radio label:hover:not(.label-in-checkbox label),
body .gform_wrapper .gfield_checkbox label:hover:not(.label-in-checkbox label) {
  border-color: var(--luzalya-primary);
  background: var(--luzalya-secondary-light);
}

/* Quand sélectionné */
body .gform_wrapper .gfield_radio input.gfield-choice-input:checked + label,
body .gform_wrapper .gfield_checkbox input.gfield-choice-input:checked + label {
  background: var(--luzalya-secondary-light);
  border-color: var(--luzalya-primary);
  font-weight: 600;
  color: var(--luzalya-primary);
}

/* ========================================
   BOUTONS (Suivant / Précédent / Envoyer)
   ======================================== */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_save_link.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  border: none;
  border-radius: var(--luzalya-border-radius-small) !important;
  padding: 14px 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
  text-decoration: none;

}

/* Bouton primaire (Suivant / Submit générique) */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button {
  background: var(--luzalya-primary) !important;
  box-shadow: var(--luzalya-shadow);
  color: var(--luzalya-white) !important;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover {
  background: var(--luzalya-primary-light) !important;
  border-color: var(--luzalya-primary) !important;
}
.gform_wrapper .gform_button:active,
.gform_wrapper .gform_next_button:active {
  box-shadow: var(--luzalya-shadow);
}

/* Bouton secondaire (Précédent) */
.gform_wrapper .gform_previous_button {
  background: var(--luzalya-text-dark);
  color: var(--luzalya-text-dark) !important;
}
.gform_wrapper .gform_previous_button:hover {
  background: var(--luzalya-text-dark);
}

/* Input Submit (style aligné sur primaire) */
body .gform_wrapper input[type="submit"] {
  background: var(--luzalya-primary) !important;
  color: var(--luzalya-white);
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--luzalya-shadow);
  transition: all 0.2s ease;
}

/* Hover */
body .gform_wrapper input[type="submit"]:hover {
  background: var(--luzalya-primary-light);
  transform: translateY(-1px);
}

/* Active / click */
body .gform_wrapper input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--luzalya-shadow);
}

/* Conteneur des boutons */
/* Supprime margin par défaut des boutons */
.gform-wrapper .gform_next_button,
.gform-wrapper .gform_previous_button {
  margin: 0;
}

/* ========================================
   AUTOFILL WEBKIT
   ======================================== */
/* Supprimer le fond bleu autofill pour Chrome/Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--luzalya-white) inset !important;
  -webkit-text-fill-color: var(--luzalya-text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ========================================
   BARRE DE PROGRESSION
   ======================================== */
.gform_wrapper .gf_progressbar {
  background: var(--luzalya-border);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.gform_wrapper .gf_progressbar_percentage {
  background: var(--luzalya-primary) !important;
  border-radius: 999px;
}

/* ========================================
   ERREURS & VALIDATION
   ======================================== */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: var(--luzalya-error-text);
  box-shadow: var(--luzalya-shadow);
}
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors {
  color: var(--luzalya-error-text);
}
.gform_confirmation_message {
  background: var(--luzalya-primary) !important;
  border: 1px solid var(--luzalya-primary);
  color: var(--luzalya-white);
  border-radius: var(--luzalya-border-radius-large);
  padding: 14px 16px;
}

/* ========================================
   CARTES / SECTIONS (alternative avec carte)
   ======================================== */
.gform_wrapper .gsection_title {
  font-weight: 700;
  color: var(--luzalya-tex);
}
.gform_wrapper .gsection {
  background: var(--luzalya-white);
  border: 1px solid var(--luzalya-border);
  border-radius: var(--luzalya-border-radius-large);
  padding: 16px;
  margin: 12px 0 18px;
}

/* Petites notes sous les champs */
.gform_wrapper .gfield_description {
  color: var(--luzalya-text-light);
}

/* ========================================
   SAUVEGARDE & CONTINUER
   ======================================== */
.gform_wrapper .form_saved_message h2 {
  color: var(--luzalya-primary) !important;
  font-size: 1.8rem !important;
}

.form_saved_message_sent h2 {
  color: var(--luzalya-primary) !important;
  font-size: 1.8rem !important;
}

/* ========================================
   PAGE RÉCAPITULATIVE
   ======================================== */
.gform_review_page .recap-container .recap-ligne{
  margin-bottom: 5px;
}

.gform_review_page .recap-container .recap-label{
  font-weight: 600;
}

.gform_review_page .recap-container .recap-ligne .recap-value ul li{
  margin: 0 !important;
}

.gform_review_page .recap-container .recap-ligne .recap-value a{
  color: var(--luzalya-primary) !important;
}

.gform_review_page .recap-container .recap-ligne .recap-value  a.map-it-link {
  display: none;
}

/* ========================================
   FOOTER DU FORMULAIRE
   ======================================== */
.gform-page-footer {
  margin: 50px 0 0 0 !important;
}

/* ========================================
   TITRES DE SECTIONS EN PRÉVIEW
   ======================================== */
.recap-section-title {
  color: var(--luzalya-text-dark) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: inherit;
  margin: 0;
}

/* ========================================
   RESPONSIVE GRAVITY FORM
   ======================================== */
@media (max-width: 768px) {
  .gform_wrapper .gform_button,
  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_previous_button {
    width: 100%;
    padding: 15px;
  }
  .gform_wrapper,
  .gform_wrapper.gravity-theme {
    padding: 15px;
  }
  .gform-page-footer {
    margin: 30px 0 0 0 !important;
  }
  .gform_wrapper .gform_save_link.button {
    margin: 10px 0 0 0 !important;
    padding: 10px !important;
    font-size: 0.8rem !important;
  }
  .gform_confirmation_wrapper {
    padding: 15px !important;
  }

}