/* =========================================================
   Pearl Bike — téléphone international
   ========================================================= */

/* On force les chemins absolus des sprites */
.iti {
  --iti-path-flags-1x:
    url("/modules/pearlbikeregistration/views/css/img/flags.webp");

  --iti-path-flags-2x:
    url("/modules/pearlbikeregistration/views/css/img/flags@2x.webp");

  width: 100%;
  max-width: 100%;
}

#customer-form .iti input {
  width: 100%;
  min-height: 48px;
}

/* Bloc gauche : drapeau + indicatif */
#customer-form .iti__selected-country {
  background: #f7f9fb;
  border-right: 1px solid #d9e2ea;
}

#customer-form .iti__selected-dial-code {
  font-weight: 600;
}

/* On force l'affichage des drapeaux */
.iti__flag {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.iti__selected-country .iti__flag,
.iti__country-list .iti__flag {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dropdown pays */
.iti__country-container {
  z-index: 20;
}

.iti__dropdown-content,
.iti__country-selector {
  z-index: 999999 !important;
  background: #fff;
  border: 1px solid #d9e2ea;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.iti__country-list {
  max-height: min(360px, 55vh) !important;
  overflow-y: auto !important;
}

.iti__search-input {
  min-height: 42px;
  width: 100%;
}

/* Erreurs */
#customer-form .pb-phone-error:empty {
  display: none !important;
}

#customer-form .pb-phone-error {
  margin-top: 6px;
}


/* =========================================================
   Pearl Bike — sélection Pays avec drapeaux
   ========================================================= */

#customer-form .pb-country-native-select {
  display: none !important;
}

#customer-form .pb-country-picker {
  width: 100%;
  position: relative;
}

#customer-form .pb-country-button {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  border: 1px solid #d9e2ea;
  border-radius: 12px;

  background: #fff;
  color: inherit;

  text-align: left;

  cursor: pointer;
}

#customer-form .pb-country-button:hover {
  border-color: #b9c8d5;
}

#customer-form .pb-country-button:focus {
  outline: none;

  border-color: #177CD2;

  box-shadow:
    0 0 0 .2rem rgba(23,124,210,.12);
}

.pb-country-current-name {
  flex: 1;
}

.pb-country-arrow {
  margin-left: auto;
  font-size: 13px;
}


/* Menu attaché directement au body */

.pb-country-menu {
  position: absolute;

  z-index: 999999;

  max-height: min(430px, 65vh);

  background: #fff;

  border: 1px solid #d9e2ea;
  border-radius: 12px;

  box-shadow:
    0 12px 30px rgba(0,0,0,.16);

  overflow: hidden;
}

.pb-country-menu[hidden] {
  display: none !important;
}


/* Recherche */

.pb-country-search-wrapper {
  padding: 10px;

  border-bottom:
    1px solid rgba(0,0,0,.08);

  background: #fff;
}

.pb-country-search {
  width: 100%;

  min-height: 42px;

  padding: 8px 12px;

  border: 1px solid #d9e2ea;
  border-radius: 9px;

  outline: none;
}

.pb-country-search:focus {
  border-color: #177CD2;

  box-shadow:
    0 0 0 .15rem rgba(23,124,210,.10);
}


/* Liste */

.pb-country-list {
  max-height: min(350px, 52vh);

  overflow-y: auto;

  overscroll-behavior: contain;
}


/* Chaque pays */

.pb-country-item {
  width: 100%;

  min-height: 42px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 8px 13px;

  border: 0;

  background: #fff;
  color: inherit;

  text-align: left;

  cursor: pointer;
}

.pb-country-item:hover,
.pb-country-item:focus {
  background:
    rgba(23,124,210,.07);

  outline: none;
}


/* Drapeaux */

.pb-country-picker .iti__flag,
.pb-country-menu .iti__flag {
  display: inline-block !important;

  visibility: visible !important;
  opacity: 1 !important;

  flex: 0 0 auto;
}


/* Mobile */

@media (max-width: 767.98px) {

  .pb-country-menu {
    max-width:
      calc(100vw - 24px);
  }

}