/* ============================================================
   MODAL DOMINIO NO DISPONIBLE - NUEVO ESTILO
   Complemento del modal-nuevo-estilo.css
   Solo CSS — no toca JS, IDs ni clases funcionales
   ============================================================ */

/* --- Card NoDisp: contenedor principal --- */
#card-NoDisp {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* --- Banner superior: "X dominio no está disponible" --- */
#noDisBox3 {
  background-color: #fef2f2 !important;
  border-radius: 1rem !important;
  padding: 1.5rem 2rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

/* Nombre del dominio dentro de noDisBox3 */
#noDisBox3 .domainSearch {
  font-size: 2.2rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #0d1333 !important;
    text-align: left !important;
    margin-top: 0 !important;
}

/* "no está disponible" en rojo — viene del JS como texto dentro de .domainType */
#noDisBox3 .domainType {
  font-size: 0.95rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: #555 !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

/* Ocultar el "✖ No está disponible" duplicado que viene en el segundo .domainType */
#noDisBox3 .noDispBox:last-child .domainType strong {
  display: none !important;
}

/* --- Banner "Otras opciones" (bannerNoDisp) → convertir en card de alternativas --- */
#bannerNoDisp {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Ocultar imagen del pulgar y textos del banner antiguo */
#bannerNoDisp .banner-img {
  display: none !important;
}

#bannerNoDisp .banner-text {
  display: none !important;
}

/* --- Sección de sugerencias: "Alternativas disponibles para ti" --- */
.sugerencias {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
}


/* Contenedor de la lista */
.sugerencias .divSugerencias {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.sugerencias ul {
  width: 100% !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cada item de sugerencia: fila con dominio a la izq y "Registrar ahora" a la der */
.sugerencias .disponible {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-size: 1rem !important;
  font-family: "Montserrat-Regular", sans-serif !important;
  color: #0d1333 !important;
  background-color: #fff !important;
}

.sugerencias .disponible:last-child {
  border-bottom: none !important;
}

/* El div interno con el ✔ y el nombre — mostrar solo el nombre */
.sugerencias .disponible > div {
  font-weight: 500 !important;
  color: #0d1333 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: auto !important;
}

/* Punto verde + "Registrar ahora" a la derecha via pseudo-elemento en cada li */
.sugerencias .disponible::after {
  content: "● Registrar ahora";
  color: #1a7a4a !important;
  font-family: "Montserrat-Bold", sans-serif !important;
  font-size: 0.85rem !important;
  font-style: italic !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* --- Botón "Buscar nuevas opciones" --- */
#card-nuevas-opciones {
  background-color: #ffffff !important;
  border-radius: 1rem !important;
  padding: 1rem 2rem !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: center !important;
}

#card-nuevas-opciones a {
      background-color: transparent !important;
    color: #759ae0ff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-decoration: none !important;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  #noDisBox3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1rem !important;
  }

  #noDisBox3::before {
    min-width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }

  .sugerencias .disponible {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .sugerencias .disponible::after {
    align-self: flex-end !important;
  }

  .domainUnavailableWrapper{
    flex-direction: column !important;
    gap: 15px !important;
    padding: 20px !important;
  }
  .domainUnavailableWrapper .domainUnavailableText p
  {
    text-align: center !important;
  }

  #noDisBox3 .domainSearch{
    text-align: center !important;
    font-size:1.6rem !important;
  }

  #noDisBox3 .domainUnavailableWrapper .domainSearch span{
    font-size:1.6rem !important;
  }
}

.domainUnavailableWrapper{
    display:flex;
    align-items:center;
    gap:25px;
    border-radius:0 40px 0 0;
    padding:30px;
}

.domainUnavailableIcon{
    width:90px;
    height:90px;
    min-width:90px;
    border-radius:50%;
    border:1px solid #e7dede;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:55px;
    color:#ff3b0a;
    font-weight:bold;
}

.domainUnavailableWrapper .domainSearch{
    font-size:2.2rem;
    font-weight:600;
    color:#16233b;
    margin-bottom:12px;
}

.domainUnavailableWrapper .domainSearch span{
    color:#ff3b0a !important;
    font-size:2.2rem !important;
    font-weight:500;
}

.domainUnavailableWrapper .domainUnavailableText p{
    margin:5px 0;
    font-size:1.05rem;
    color:#111;
}