/**
 * DIPLOMA.AFRICA - Custom Select Additions v1.2
 * Complément CSS pour :
 * - Parents virtuels (hiérarchie webform "Parent › Enfant")
 * - Mode plat avec recherche (selects > 10 options comme pays)
 */

/* ============================================
   PARENTS VIRTUELS (WEBFORM)
   Parents générés à partir du format "Parent › Enfant"
   Non-cliquables, servent de headers de groupe
   ============================================ */

.custom-select-option.parent.virtual {
  cursor: default;
  pointer-events: none;
}

.custom-select-option.parent.virtual:hover {
  background: transparent;
}

/* ============================================
   MODE PLAT AVEC RECHERCHE
   Pour les selects plats qui ont > 10 options
   (ex: pays avec ~200 options)
   ============================================ */

/* Quand le wrapper est simple mais a une recherche, on veut un max-height raisonnable */
.custom-select--simple .custom-select-options {
  max-height: 280px;
}

/* ============================================
   WEBFORM CONTEXT
   Styles spécifiques au contexte webform
   pour s'assurer de la cohérence visuelle
   ============================================ */

.webform-submission-form .custom-select-wrapper {
  margin-bottom: 0;
}

.webform-submission-form .custom-select-trigger {
  /* Garder la même hauteur que les inputs webform */
  min-height: 44px;
}

/* S'assurer que le select natif caché dans le webform ne crée pas d'espace */
.webform-submission-form select.form-select[style*="display: none"] {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Couleur texte des options dans le contexte webform */
.webform-submission-form .custom-select-option {
  color: #475569;
}

.webform-submission-form .custom-select-option {
    padding: 9px 10px 9px 20px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}


.webform-submission-form .custom-select-option:hover {
  background: #EFF6FF;
  color: #2563EB;
}


.views-exposed-form .custom-select-option {
    padding: 9px 10px 9px 20px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.views-exposed-form .custom-select-option:hover {
  background: #EFF6FF;
  color: #2563EB;
}