@import url("exafly-tokens.css");

/* Le bloc tel garde l'apparence standard ; on place un préfixe visuel à gauche */
.exafly-field--phone {
  position: relative;
}

.exafly-field--phone .exf-prefix {
  position: absolute;
  left: 12px;
  top: 35px;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  font: inherit;
  line-height: 1;
  white-space: nowrap;
}

/* Le conteneur de l'input tel doit être en position:relative */
.exf-iti__input-wrap {
  position: relative;
}

/* Ghost (mask restant) */
.exf-iti__ghost {
  position: absolute;
  top: calc(50% + 7px);
  transform: translateY(-50%);
  left: 10px;
  color: var(--agence3ma-color-danger);
  pointer-events: none;
  user-select: none;
  white-space: pre;
  font: inherit;
  line-height: 1;
}

.exf-iti__ghost-prefix {
  color: var(--agence3ma-color-ink);
}

.exf-iti__ghost-typed {
  opacity: 0;
  padding-left: 1px;
}

.exf-iti__measure {
  position: absolute;
  visibility: hidden;
  top: -9999px;
  left: -9999px;
  white-space: pre;
  font: inherit;
}

/* Pays (gauche) + Téléphone (droite) */
.exf-iti-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

@media (width <= 420px) {
  .exf-iti-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Le select pays garde le look "input" du thème */
.exf-iti__country.rt-input {
  height: 44px;
  line-height: normal;
  padding: 0 34px 0 12px;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  width: 100%;
}

.exf-iti-row .exf-flagselect-wrap,
.exf-iti-row .exafly-field--phone {
  min-width: 0;
  width: 100%;
}

.exf-iti-row .exafly-field--phone input[type="tel"] {
  width: 100%;
}

/* =========================
   Faux select (flag select)
   ========================= */
.exf-flagselect {
  position: relative;
  display: block;
  width: 100%;
}

/* Le bouton copie les métriques du select en JS ; on n'impose pas de height ici */
.exf-flagselect__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
}

.exf-flagselect__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* caret en absolu → n'impacte pas la hauteur */
.exf-flagselect__caret {
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: translateY(-50%) rotate(45deg);
  position: absolute;
  right: 12px;
  top: 50%;
}

/* =============== UNIFORM FLAG BOX =============== */
/* On force un petit carré fixe pour que tous les drapeaux aient la même "emprise" */
.exf-flagselect__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1em;
  line-height: 1;
  font-size: 1.2em;
  transform: translateY(0.02em);
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Twemoji Mozilla",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,sans-serif;
  font-variant-emoji: emoji;
  flex: 0 0 auto;
}

/* On peut légèrement agrandir l'emoji dans la liste pour un meilleur confort visuel */
.exf-flagselect__list .exf-flagselect__flag {
  font-size: 1.25em;
}
/* ================================================= */

/* liste déroulante (sans puces) */
.exf-flagselect__list {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 4px 0;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
  max-height: 280px;
  overflow: auto;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  display: none;
  list-style: none;
}

.exf-flagselect[aria-expanded="true"] .exf-flagselect__list {
  display: block;
}

.exf-flagselect__option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  cursor: pointer;
  white-space: nowrap;
}

.exf-flagselect__option[aria-selected="true"],
.exf-flagselect__option:hover {
  background: #f0f0f1;
}

/* On cache le <select> sans casser la mise en page du champ */
.exf-flagselect--hidens > select.exf-iti__country {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Champ téléphone – conteneur */
.a3ma-exafly-step--passengers .exafly-field--phone {
  position: relative;
}

/* Icône "i" d'information */
.a3ma-exafly-step--passengers .exafly-field--phone .exafly-field__info {
  position: absolute;
  z-index: 5;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  border-radius: 50%;
  background: var(--agence3ma-color-primary);
  color: #fff;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Tooltip (bulle) */
.a3ma-exafly-step--passengers .exafly-field--phone .exafly-field__info::after {
  content: attr(data-exafly-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  left: auto;
  transform: translateY(-50%);
  box-sizing: border-box;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 8px;
  background: #ffffff;
  color: #222222;
  font: 13px/1.4 var(--agence3ma-font-sans);
  font-weight: normal;
  line-height: 1.4;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
  z-index: 4;

  white-space: normal;
  opacity: 0;
  pointer-events: none;
}

/* Affichage au survol (desktop) et au focus/clic (mobile & clavier) */
.a3ma-exafly-step--passengers .exafly-field--phone .exafly-field__info:hover::before,
.a3ma-exafly-step--passengers .exafly-field--phone .exafly-field__info:hover::after,
.a3ma-exafly-step--passengers .exafly-field--phone .exafly-field__info:focus::before,
.a3ma-exafly-step--passengers .exafly-field--phone .exafly-field__info:focus::after {
  opacity: 1;
}

//icône info à gauche du champ
.a3ma-exafly-step--passengers .exafly-field--info-left .exafly-field__info {
  right: auto;
  left: 5px;
}

/* Décaler le label pour ne pas chevaucher l'icône */
.a3ma-exafly-step--passengers .exafly-field--info-left .exafly-field__label {
  left: 32px;
}

/* Tooltip à droite de l'icône (au lieu de gauche) */
.a3ma-exafly-step--passengers .exafly-field--info-left .exafly-field__info::after {
  right: auto;
  left: calc(100% + 8px);
}