/**
 * direct-invitations — contact form public styles.
 * Extra-contacts repeater layout + Brevo identification notices.
 */

form.contactForm {
  .extra-contacts-field-wrap {
    grid-column: 1 / -1;
  }

  .id-du-demandeur-wrap,
  .extra-contacts-intro {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
  }

  .extra-contacts-intro {
    margin-block: 0;
    padding: 0;
    text-align: center;
  }

  .id-du-demandeur-wrap {
    > label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    input {
      text-align: center;
    }
  }

  .extra-contacts-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 1.2rem 2rem;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--wp--preset--color--base, #1a1a1a);
    text-decoration: none;
    background-color: var(--wp--preset--color--white, #fff);
    border: 1px solid var(--wp--preset--color--mediumgrey, #ccc);
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover,
    &:focus {
      color: var(--wp--preset--color--base, #1a1a1a);
      background-color: var(--wp--preset--color--white, #fff);
    }
  }

  .extra-contacts-panel[hidden] {
    display: none !important;
  }

  .extra-contacts-group-label,
  .extra-contacts-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .extra-contacts-rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
    margin-top: 2rem;
  }

  .extra-contacts-row,
  .extra-contacts-row-fields {
    display: contents;
  }

  .brevo-identification-notice {
    margin: 1rem 0 0;
    padding: 1.2rem 1.6rem;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--large, 1.8rem);
    line-height: 1.4;
    text-align: center;
    border-radius: 0.4rem;

    &.alert-success {
      margin-bottom: 1rem;
      font-family: var(--wp--preset--font-family--base);
      font-size: 24px;
      font-weight: 900;
      line-height: 1.3;
    }

    &.alert-danger {
      color: #842029;
      background-color: #f8d7da;
      border: 1px solid #f5c2c7;
    }
  }

  &.brevo-identification-blocked {
    .submitFormField button {
      cursor: not-allowed;
      opacity: 0.65;
    }

    .extra-contacts-field {
      opacity: 0.5;
      pointer-events: none;
      user-select: none;
      filter: grayscale(0.2);

      .extra-contacts-toggle,
      .extra-contacts-panel input {
        cursor: not-allowed;
      }
    }
  }

  @media (max-width: 767px) {
    .extra-contacts-intro {
      max-width: none;
    }

    .extra-contacts-toggle {
      display: flex;
      width: 100%;
    }

    .extra-contacts-rows {
      grid-template-columns: 1fr;
    }
  }
}