/**
 * @file
 * Minimal CSS overrides for the user profile modal.
 *
 * Priority is given to Tailwind utility classes in Twig/Form API markup.
 * This file keeps only behaviors that are cumbersome with pure utilities:
 * - custom select chevron icon
 * - disclaimer scrollbar (no edge fade mask — radius visibles, SWGB-319)
 * - AJAX error panel style
 */

.cb-user-profile-error {
  background-color: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.6);
  color: #fca5a5;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

html.cb-user-profile-modal-open,
body.cb-user-profile-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.cb-user-profile-modal-form .cb-user-profile-select,
.cb-user-profile-modal-form select.form-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 0 58px 0 24px;
  border: 1px solid #edeff0;
  border-radius: 12px;
  background-color: #ffffff;
  color: #072f3c;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.02em;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 9.167L10 11.667L12.5 9.167' stroke='%23072f3c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(86.16deg, rgba(255, 255, 255, 0.2) 11.14%, rgba(255, 255, 255, 0.012) 113.29%);
  background-repeat: no-repeat;
  background-position:
    right 20px center,
    right 8px center;
  background-size:
    20px 20px,
    44px 44px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cb-user-profile-modal-form .cb-user-profile-select:hover,
.cb-user-profile-modal-form select.form-select:hover {
  border-color: #c9d1d4;
}

.cb-user-profile-modal-form .cb-user-profile-select:focus-visible,
.cb-user-profile-modal-form select.form-select:focus-visible {
  outline: none;
  border-color: #0e5e77;
  box-shadow: 0 0 0 2px rgba(14, 94, 119, 0.25);
}

.cb-user-profile-modal-form .cb-user-profile-select::-ms-expand,
.cb-user-profile-modal-form select.form-select::-ms-expand {
  display: none;
}

.cb-user-profile-modal-form .cb-user-profile-select option,
.cb-user-profile-modal-form select.form-select option {
  color: #072f3c;
}

.cb-user-profile-disclaimer {
  overflow: hidden;
}

.cb-user-profile-disclaimer__content {
  height: 100%;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cb-user-profile-disclaimer__content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.cb-user-profile-disclaimer__scrollbar {
  position: relative;
  border-radius: 999px;
  background: #ffffff;
}

.cb-user-profile-disclaimer__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 33px;
  border-radius: 999px;
  background: #7a7a7a;
}

.cb-user-profile-disclaimer p {
  margin: 0;
}

.cb-user-profile-disclaimer p + p {
  margin-top: 0.5rem;
}

.cb-user-profile-disclaimer h1,
.cb-user-profile-disclaimer h2,
.cb-user-profile-disclaimer h3,
.cb-user-profile-disclaimer h4,
.cb-user-profile-disclaimer h5,
.cb-user-profile-disclaimer h6 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.cb-user-profile-modal-form label.js-form-required,
.cb-user-profile-modal-form label.option.js-form-required {
  color: #ffffff !important;
}

.cb-user-profile-modal-form .cb-user-profile-submit {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* Largeur adaptative, jamais figée : les 137 px de la maquette valent pour
     « Start », pas pour « Commencer », qui débordait sous l'icône puis se
     faisait rogner. Le gabarit anglais est conservé au pixel près par le
     min-width, la marge droite de 58 px réservant la place de la flèche
     (20 px d'icône posée à 30 px du bord, plus 8 px de gouttière). */
  width: auto;
  min-width: 137px;
  /* Le bouton est un élément flexible de .form-actions : sans borne haute, une
     traduction plus longue que le conteneur le ferait déborder, puis rétrécir
     jusqu'au min-width — soit le rognage que ce correctif supprime. */
  max-width: 100%;
  height: 80px;
  padding: 0 58px 0 32px;
  border: 1px solid #c9d1d4;
  border-radius: 12px;
  background-color: #ffffff;
  color: #072f3c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 12.8L12.8 10M12.8 10L10 7.2M12.8 10H7.2M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23072f3c' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 30px center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cb-user-profile-modal-form .cb-user-profile-submit:hover,
.cb-user-profile-modal-form .cb-user-profile-submit:focus-visible {
  background-color: #3f505b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 12.8L12.8 10M12.8 10L10 7.2M12.8 10H7.2M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23ffffff' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: #62747d;
  color: #ffffff;
}

.cb-user-profile-modal-form .cb-user-profile-submit:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .cb-user-profile-modal-form {
    gap: 24px;
  }

  .cb-user-profile-modal-form .cb-user-profile-selects-row {
    gap: 24px;
  }

  .cb-user-profile-modal-form .cb-user-profile-selects-row .js-form-item > label {
    text-align: center;
    width: 100%;
  }

  .cb-user-profile-modal-form .cb-user-profile-agree + label,
  .cb-user-profile-modal-form .js-form-item-agree > label {
    text-align: left;
    width: auto;
    display: block;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.02em;
  }

  .cb-user-profile-modal-form .cb-user-profile-agree {
    width: 18px;
    height: 18px;
    margin-top: 3px;
  }

  .cb-user-profile-modal-form .cb-user-profile-disclaimer-agree-row {
    gap: 24px;
  }

  .cb-user-profile-disclaimer {
    height: 164px;
    border-radius: 16px;
    padding: 20px;
  }

  .cb-user-profile-modal-form .cb-user-profile-submit {
    width: 100%;
    min-width: 0;
    height: 80px;
    justify-content: center;
    text-align: center;
    /* Réserve symétrique : le libellé est centré, et l'icône ancrée au bord
       droit par la règle de base dispose des mêmes 58 px qu'en grand écran.
       Une réserve posée du seul côté droit décentrerait le texte d'autant.
       L'ancrage d'origine, calc(50% + 38px), collait la flèche au libellé
       « Start » mais passait sous « Commencer », plus large de 58 px. */
    padding-inline: 58px;
  }

  .cb-user-profile-modal-form .form-actions {
    width: 100%;
  }
}