/**
 * ZIZI - Look & feel del campo teléfono en registro (código de país + número).
 * Cerrado: solo "+##". Abierto: lista completa con país.
 */

/* Fila teléfono: mismo espaciado que otros campos y espacio para el icono del tema */
.register-form-wrap .form-group-field.phone-field.zizi-phone-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 42px;
}

/* Contenedor código de país: ancho mínimo para solo "+52" (o "+1", "+34", etc.) */
.register-form-wrap .zizi-phone-row .zizi-phone-country-code-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 56px;
  width: auto;
}

/* Botón cerrado: solo muestra +##, poco ancho */
.register-form-wrap .zizi-phone-row .zizi-country-trigger {
  cursor: pointer;
  padding-left: 10px;
  padding-right: 28px;
  min-width: 56px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  height: calc(1.5em + 0.75rem + 2px);
  line-height: 1.5;
  color: #636363;
  font-size: inherit;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23636363' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  -webkit-appearance: none;
  appearance: none;
}

.register-form-wrap .zizi-phone-row .zizi-country-trigger:hover,
.register-form-wrap .zizi-phone-row .zizi-country-trigger:focus {
  outline: 0;
}

/* Lista desplegable: oculta por defecto */
.register-form-wrap .zizi-phone-row .zizi-country-list {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dce0e0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
}

.register-form-wrap .zizi-phone-row .zizi-country-list.is-open {
  display: block;
}

.register-form-wrap .zizi-phone-row .zizi-country-option {
  padding: 10px 14px;
  cursor: pointer;
  color: #636363;
  font-size: inherit;
  border-bottom: 1px solid #eee;
}

.register-form-wrap .zizi-phone-row .zizi-country-option:last-child {
  border-bottom: none;
}

.register-form-wrap .zizi-phone-row .zizi-country-option:hover,
.register-form-wrap .zizi-phone-row .zizi-country-option:focus {
  background: #f5f5f5;
  outline: 0;
}

/* Contenedor del número local: ocupa el resto */
.register-form-wrap .zizi-phone-row .zizi-phone-local-wrap {
  flex: 1 1 0;
  min-width: 120px;
}

.register-form-wrap .zizi-phone-row .zizi-phone-local-wrap .form-control {
  padding-left: 12px;
  height: calc(1.5em + 0.75rem + 2px);
  border: none;
  border-radius: 0;
}

/* RTL */
[dir="rtl"] .register-form-wrap .form-group-field.phone-field.zizi-phone-row {
  padding-left: 0;
  padding-right: 42px;
}

[dir="rtl"] .register-form-wrap .zizi-phone-row .zizi-country-trigger {
  text-align: right;
  background-position: left 8px center;
}

[dir="rtl"] .register-form-wrap .zizi-phone-row .zizi-country-list {
  left: auto;
  right: 0;
}