/* Register page specific styling */

/* ============ Menu déroulant "préférences de voyage" ============ */

.preferences-dropdown {
  width: 100%;
  margin-bottom: 18px;
}

/* Bouton déclencheur : même look que les autres champs (verre dépoli sombre) */
.preferences-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.preferences-trigger:hover,
.preferences-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
.preferences-trigger i:first-child {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

.preferences-trigger-text {
  flex: 1;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
}
.preferences-trigger-text.has-selection { color: #fff; font-weight: 500; }

.preferences-chevron {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.preferences-dropdown.is-open .preferences-chevron { transform: rotate(180deg); }

/* Panneau déroulant : maintenant DANS le flux (plus de position: absolute),
   donc il pousse la carte et l'agrandit au lieu de flotter par-dessus.
   Pas de scroll interne : max-height large, c'est la page qui défile si besoin. */
.preferences-panel {
  background: transparent;
  border-radius: 14px;
  box-shadow: 0 10px 26px -10px hsl(0, 9%, 98%);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 8px;
  margin-top: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin-top 0.25s ease;
}
.preferences-dropdown.is-open .preferences-panel {
  max-height: 600px; /* large marge, suffisant pour les 7 options sans jamais avoir besoin de scroller dedans */
  opacity: 1;
  padding: 8px;
  margin-top: 8px;
}

.pref-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s ease;
  box-shadow: 0 1px 1px rgba(235, 230, 230, 0.884);
}

.pref-option:first-child {
  box-shadow: 0 1px 1px rgba(235, 230, 230, 0.884), 
              0 -1px 1px rgba(235, 230, 230, 0.884);
}


.pref-option:hover { background: rgba(255, 255, 255, 0.14); }

.pref-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Icônes en noir/gris, style pictogramme sobre (façon Wikipedia) */
.pref-option-icon {
  width: 20px;
  text-align: center;
  font-size: 15px;
  color: #444;
  flex-shrink: 0;
}

.pref-option-label {
  flex: 1;
  font-size: 14px;
  color: #e4e2e2;
}

.pref-option-check {
  font-size: 13px;
  color: #37aa2c;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.pref-option.is-selected { background: rgba(255, 255, 255, 0.14); }
.pref-option.is-selected .pref-option-check {
  opacity: 1;
  transform: scale(1);
}

.pref-option:has(input:focus-visible) {
  outline: 2px solid #111;
  outline-offset: -2px;
}

@media (max-width: 480px) {
  .preferences-trigger { font-size: 13px; padding: 12px 14px; }
  .pref-option-label { font-size: 13px; }
}