/* Sélecteur de pays des modales de profil — retour Tatianna 11/08 (#2853).

   Port du combobox de l'onboarding talent (.tb-combobox, talent_onboarding.css,
   #1579) vers les modales de profil, avec les deux ajouts demandés par le
   ticket : un drapeau à gauche, le nom du pays à droite.

   POURQUOI UN SEUL PRÉFIXE `pf-` (profil) ET PAS UN PAR ÉCRAN
   ----------------------------------------------------------
   Le champ est rendu par UN partial unique (shared/_country_combobox), servi
   à la fois par la modale d'identité du talent (préfixe `tp-`) et par la modale
   d'édition de l'expert (préfixe `tpc-`). Deux copies de ces règles, une par
   préfixe, seraient deux copies à faire diverger : c'est exactement ce que
   components.css a été créé pour arrêter. Le préfixe reste celui du domaine,
   `pf-` = profil, et n'entre en collision ni avec `tb-` (onboarding) ni avec
   les préfixes de page.

   Le champ lui-même hérite du style des modales hôtes (.tp-fg input /
   .tpc-fg input) : rien n'est redéfini ici sur l'input, sauf la place à
   réserver au chevron.

   Couleurs : jetons de design_tokens.css (--gold-*), aucune valeur dorée en dur. */

.pf-combobox { position: relative; }
.pf-combobox-input { padding-right: 38px; }

.pf-combobox-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; background: transparent; border-radius: 7px;
  display: grid; place-items: center; color: #A3A3A3; cursor: pointer;
  transition: color .15s ease;
}
.pf-combobox-toggle:hover { color: var(--gold-500); }
.pf-combobox-toggle svg { transition: transform .18s ease; }
.pf-combobox.is-open .pf-combobox-toggle { color: var(--gold-500); }
.pf-combobox.is-open .pf-combobox-toggle svg { transform: rotate(180deg); }

.pf-combobox-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #FFFFFF; border: 1px solid #E5E0D4; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(26, 22, 20, 0.14);
  max-height: 240px; overflow-y: auto; padding: 6px;
}

.pf-combobox-option {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 7px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 500; color: #0A0A0A;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
.pf-combobox-option:hover, .pf-combobox-option.is-active { background: #FBF4E0; color: var(--gold-800); }
.pf-combobox-option.is-selected { color: var(--gold-800); font-weight: 700; }

/* Drapeau à gauche, nom du pays à droite (demande explicite du ticket). */
.pf-combobox-flag {
  width: 18px; height: 14px; flex-shrink: 0; border-radius: 2px;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14);
}
.pf-combobox-label { flex: 1; min-width: 0; }

/* display:flex des règles ci-dessus > [hidden] du navigateur : on ré-affirme le
   masquage, sinon le filtrage JS n'aurait aucun effet visible. */
.pf-combobox-panel [hidden] { display: none !important; }

.pf-combobox-empty { padding: 10px 12px; font-size: 12px; color: #737373; line-height: 1.5; }