/* ===============================
   WRAPPER
================================ */
.floating-fixed {
  position: relative;
  overflow: visible !important;
  z-index: 10;
}

/* ===============================
   INPUT
================================ */
.floating-fixed .form-control {
  height: calc(3.5rem + 2px);
  padding-top: 1.6rem;
  padding-left: 90px;
}

/* intl-tel-input dentro del wrapper */
.floating-fixed .iti {
  width: 100%;
  position: relative;
  z-index: 1;
}

.floating-fixed .iti input.form-control {
  height: calc(3.5rem + 2px);
  padding-top: 1.6rem;
  padding-left: 90px !important;
}

/* ===============================
   LABEL FLOTANTE (SIEMPRE ARRIBA)
================================ */
.floating-fixed .floating-label {
  position: absolute;
  top: 0.35rem;
  left: 0.75rem;
  font-size: 0.85rem;
  color: #6c757d;
  background: #fff;
  padding: 0 .25rem;
  pointer-events: none;
  z-index: 10; /* más alto que .iti */
}

/* ===============================
   BANDERA
================================ */
.floating-fixed .iti__flag-container {
  top: 1.1rem;
  padding-left: 12px;
  padding-right: 10px;
}

/* ===============================
   CÓDIGO DE PAÍS
================================ */
.custom-dial-code {
  margin-left: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  white-space: nowrap;
}

/* ===============================
   DROPDOWN ENCIMA DE TODO
================================ */
.iti__dropdown-content,
.iti__country-list {
  z-index: 1055 !important;
}

/* ===============================
   BOOTSTRAP FIX
================================ */
.form-floating {
  overflow: visible !important;
}

.form-floating .iti input.form-control {
  padding-left: 90px !important;
}

    /* Select2 igual a form-control Bootstrap 5 */
.select2-container .select2-selection--single {
  height: 58px !important;            /* igual que form-floating */
  padding: 1rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 0 !important;
  line-height: normal !important;
}

.select2-selection__arrow {
  height: 100% !important;
  right: 10px;
}

/* Hover y focus igual Bootstrap */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

/* Quitar borde extra */
.select2-container--default .select2-selection--single {
  outline: none;
}

/* ===============================
   Select2 dentro de floating-fixed
================================ */
.floating-fixed .select2-container {
  width: 100% !important;
}

.floating-fixed .select2-selection--single {
  height: calc(3.5rem + 2px) !important;
  padding-top: 1.6rem !important;
  padding-left: 0.75rem;
  border-radius: 0.375rem;
}

/* Texto seleccionado */
.floating-fixed .select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 1.75rem !important;
  color: #212529;
}

/* Flecha */
.floating-fixed .select2-selection__arrow {
  height: 100%;
  right: 10px;
}

/* Focus Bootstrap */
.floating-fixed .select2-container--open .select2-selection--single,
.floating-fixed .select2-selection--single:focus {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}


/* Estado normal */
.floating-fixed .select2-selection--single {
  border-color: #dee2e6 !important;
  background-color: #fff !important;
}

/* Hover */
.floating-fixed .select2-selection--single:hover {
  border-color: #ced4da !important;
}

/* Focus */
.floating-fixed .select2-container--open .select2-selection--single,
.floating-fixed .select2-selection--single:focus {
  border-color: #ffc107 !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

/* Deshabilitado */
.floating-fixed .select2-container--disabled .select2-selection--single {
  background-color: #e9ecef !important;
  border-color: #dee2e6 !important;
}


.form-step {
  display: none;
  animation: fadeIn .3s ease-in-out;
}

.form-step.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}