/* Custom overrides for Olivero */

/* ------------------------------------------------------------------
   Webform CiviCRM – Membership Application Form
   ------------------------------------------------------------------ */

.webform-submission-form fieldset.fieldset--group > legend.fieldset__legend {
  background: transparent !important;
  font-size: inherit !important;
}

.webform-submission-form fieldset.fieldset--group > legend .fieldset__label {
  color: inherit !important;
  padding-left: 0 !important;
}

.webform-submission-form fieldset.fieldset--group .fieldset__wrapper {
  border: 0 !important;
  padding: 0 !important;
}

.webform-submission-form fieldset.fieldset--group > .fieldset__legend .fieldset__label.form-required::after {
  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
}

/* ------------------------------------------------------------------
   jQuery UI dialog (Webform modal)
   ------------------------------------------------------------------ */

/* Fond opaque pour l'overlay */
.ui-widget-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  opacity: 1 !important;
  z-index: 999 !important;
}

/* Base de la modale - Correction pour Firefox et Safari */
.ui-dialog.contract-modal-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important; /* Fix Safari */

  background-color: #ffffff !important;
  background-image: none !important;
  z-index: 1000 !important;
  border: none !important;
  box-shadow: 0 5px 30px rgba(0,0,0,0.4);

  /* Empêche le débordement horizontal */
  max-width: 95vw !important;
  width: 600px; /* Largeur par défaut desktop */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Forcer le fond blanc sur les sections structurelles uniquement */
.ui-dialog.contract-modal-dialog .ui-dialog-content,
.ui-dialog.contract-modal-dialog .ui-dialog-buttonpane {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #231f20 !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Gestion du scroll interne */
.ui-dialog.contract-modal-dialog > .ui-dialog-content {
  max-height: calc(80vh - 160px) !important;
  /* Support spécifique pour le défilement fluide sur iOS */
  -webkit-overflow-scrolling: touch;
  overflow-y: auto !important;
  padding: 1rem !important;
}

/* ------------------------------------------------------------------
   Correction spécifique pour Mobile (iPhone Safari/Chrome)
   ------------------------------------------------------------------ */

@media (max-width: 600px) {
  .ui-dialog.contract-modal-dialog {
    /* Sur mobile, on évite le translate qui peut bugger si la modale est haute */
    top: 20px !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    -webkit-transform: none !important;

    /* Largeur forcée pour éviter le dépassement à droite */
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .ui-dialog.contract-modal-dialog > .ui-dialog-content {
    /* On augmente la zone de lecture sur mobile */
    max-height: calc(100dvh - 140px) !important;
  }
}

/* ------------------------------------------------------------------
   Bouton de fermeture
   ------------------------------------------------------------------ */


/* Tant que pas scrollé : croix visible mais inerte */
.ui-dialog.contract-modal-dialog .ui-dialog-titlebar-close.contract-close-locked {
  opacity: 0.35;
  pointer-events: none; /* empêche le clic */
}

.ui-dialog-buttonpane button.is-disabled {
  opacity: 0.5;
}

/* Close button sizing + alignment */
.ui-dialog.contract-modal-dialog .ui-dialog-titlebar-close.ui-button {
  width: 32px !important;
  height: 32px !important;
  inline-size: 32px !important;
  block-size: 32px !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: -9999px; /* cache "Close" */
  overflow: hidden !important;
}

/* Icon inside close button */
.ui-dialog.contract-modal-dialog .ui-dialog-titlebar-close .ui-button-icon {
  width: 18px !important;
  height: 18px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
}

/* Title spacing (make room for close button) */
.ui-dialog.contract-modal-dialog .ui-dialog-title {
  float: none !important;
  display: block;
  padding-right: 48px; /* laisse la place au close */
}