/* ==========================================================================
   $PHONE INPUT – CORE
   ========================================================================== */

/* Pays sélectionné (zone drapeau + flèche) */
.iti__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px 0 20px !important;
}

/* Flèche dropdown */
.iti__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 16px;
  height: 16px;
  margin-left: var(--iti-arrow-padding);

  flex-shrink: 0;
  border: none;
  position: relative;

  /* SVG flèche outline */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="7 10 12 15 17 10" fill="none" stroke="%23000" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Flèche état ouvert */
.iti__arrow--up {
  border: none;
}

/* Séparateur vertical après la flèche */
.iti__arrow::after {
  content: "";
  display: block;

  width: 0.5px;
  height: 22px;
  margin-left: 18px;

  background-color: #DCDCDC;
  flex-shrink: 0;
}


/* ==========================================================================
   $INPUT – FIX ALIGNEMENT (Bubble Mobile)
   ========================================================================== */

.iti input.iti__tel-input,
.iti input.iti__tel-input[type="text"],
.iti input.iti__tel-input[type="tel"] {
  line-height: 1 !important;
  font-size: 14px !important;

  padding-top: 0 !important;
  padding-bottom: 1px !important;

  box-sizing: border-box !important;
}


/* ==========================================================================
   $DROPDOWN – SELECT
   ========================================================================== */

.iti--container {
  margin-top: 4px !important;
}

/* Conteneur dropdown */
.iti__dropdown-content {
  background-color: #FFFFFF !important;
  border-radius: 8px !important;
}

/* Dropdown inline */
.iti--inline-dropdown .iti__dropdown-content {
  position: absolute;
  z-index: 2;

  margin-top: 3px;
  margin-left: -1px !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px !important;

  box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.05) !important;
}


/* ==========================================================================
   $SEARCH INPUT (Dropdown)
   ========================================================================== */

.iti__search-input {
  width: calc(100% - 16px);
  height: 40px !important;

  margin: 8px !important;
  padding-left: 32px !important;
  padding-right: 10px;

  background-color: #F5F5F5 !important;
  border: none !important;
  border-radius: 8px !important;
}

/* Icône recherche */
.iti__search-icon {
  position: absolute;
  left: 19px;
  display: flex;
  pointer-events: none;
}

[dir="rtl"] .iti__search-icon {
  left: auto;
  right: 8px;
}

.iti__search-icon-svg {
  fill: none;
  stroke: var(--iti-search-icon-color);
  stroke-width: 3;
}

/* Bouton clear */
.iti__search-clear {
  position: absolute;
  right: 14px;

  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 4px;
  background: transparent;
  border: 0;
  border-radius: 3px;

  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Taille icône clear */
.iti__search-clear svg {
  width: 24px;
  height: 24px;
}


/* ==========================================================================
   $POPUP – FULLSCREEN (Mobile)
   ========================================================================== */

.iti--fullscreen-popup.iti--container {
  position: fixed;
  inset: 0;

  top: -4px;
  padding: 100px 0 0 !important;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  background-color: rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   $COUNTRY LIST
   ========================================================================== */

/* Item pays */
.iti__country {
  display: flex;
  align-items: center;
  padding: 10px 18px !important;
  outline: none;
}

/* Hover */
.iti__country.iti__highlight:hover {
  background-color: #F5F5F5 !important;
}

/* Liste */
.iti__country-list {
  margin: 0 0 20px 0 !important;
  padding: 0;

  list-style: none;
  cursor: pointer;

  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.iti--inline-dropdown .iti__country-list {
  max-height: 300px !important;
}


/* ==========================================================================
   $FLAG STYLES
   ========================================================================== */

/* Drapeau rectangulaire */
.iti__flag {
  width: 1.6em;
  height: 1.2em;

  border-radius: 3px;
  border: 1px solid #DCDCDC;

  overflow: hidden;
  box-shadow: none !important;

  background-size: cover !important;
  background-position: center !important;
}

/* Variante circulaire (désactivée)
.iti__flag {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid #F5F5F5;
  box-shadow: 0 0 0 #00000030;
}
*/

.iti__country-list .iti__flag {
  margin-right: 18px !important;
}

.iti__country-name {
  margin-right: 8px !important;
}