/* =========================
   CONTENEDOR
========================= */
.domain-search {
    max-width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    border: 1px solid #ccc;            /* borde gris */
    padding: 20px;                      /* espacio interno */
    border-radius: 6px;                 /* bordes redondeados */
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* sombra suave */
}

/* =========================
   FORM INLINE DESKTOP
========================= */
#bdForm {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* =========================
   INPUT Y SELECT
========================= */
#bdForm input[type="text"] {
    flex: 1;                             /* ocupa el resto del espacio */
    height: 42px;
    padding: 10px 12px 10px 35px;        /* espacio para la lupa a la izquierda */
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background: url('https://cdn-icons-png.flaticon.com/512/622/622669.png') no-repeat 10px center;
    background-size: 18px 18px;
    min-width: calc(25% + 55px);        /* ancho extra de 15px */
}

#bdForm select {
    flex: 0 0 120px;                      /* ancho fijo para select */
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* =========================
   BOTONES BASE (MISMA ALTURA)
========================= */
.btn-search,
.btn-transfer {
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    position: relative; /* CLAVE para el spinner */
}

/* =========================
   BOTÓN BUSCAR
========================= */
.btn-search {
    background-color: #FFD400 !important;
    color: #000 !important;
    padding: 0 18px;
    gap: 8px;
}

/* hover */
.btn-search:hover {
    background-color: #0057ff !important;
    color: #fff !important;
}

/* =========================
   SPINNER (OCULTO POR DEFECTO)
========================= */
.btn-search .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.3);
    border-top: 2px solid #000;
    border-radius: 50%;
    display: none;
    animation: spin 0.8s linear infinite;
}

/* ACTIVO CUANDO BUSCA */
.btn-search.loading .spinner {
    display: inline-block;
}

/* Evita doble click */
.btn-search.loading {
    pointer-events: none;
    opacity: 0.9;
}

/* =========================
   BOTÓN TRANSFERIR
========================= */
.btn-transfer {
    background-color: #000 !important;
    color: #fff !important;
    padding: 0 22px;
    text-decoration: none;
}

.btn-transfer:hover {
    background-color: #0057ff !important;
    color: #fff !important;
}

/* =========================
   RESULTADOS
========================= */
#bdResultado {
   
    width: 100%;
    margin-top: 0;        /* eliminamos margen inicial */
}

.result {
    padding: 12px 14px;
    margin-top: 10px;
    border-radius: 4px;    /* opcional: bordes redondeados */
}

.result.success {
    background: #f4fff4;
    border-left: 4px solid #28a745;
}

.result.error {
    background: #fff4f4;
    border-left: 4px solid #dc3545;
}


/* =========================
   RECOMENDACIONES
========================= */
.recomendados-title {
    text-align: center;
    font-weight: 800;
    margin-bottom: 10px;
}

.reco-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reco-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Check + dominio */
.reco-item .check {
    color: #28a745;
    font-weight: bold;
    margin-right: 8px;
}

.reco-item .domain {
    font-weight: 600;
}

/* =========================
   BOTÓN REGISTRAR PEQUEÑO Y CENTRADO
========================= */
.btn-register {
    background-color: #1f3ed3 !important;
    color: #fff !important;
    border: none;
    height: 32px;              /* altura del botón */
    padding: 0 12px;           /* espacio horizontal */
    cursor: pointer;
    font-size: 8px;            /* letra pequeña */
    display: inline-flex;       /* flex para centrar texto */
    align-items: center;        /* centra verticalmente */
    justify-content: center;    /* centra horizontalmente */
    float: right;               /* alineado a la derecha del contenedor */
    margin-left: 8px;           /* separación del nombre de dominio */
    border-radius: 4px;         /* opcional: bordes redondeados */
    box-sizing: border-box;
}

.btn-register:hover {
    background-color: #142b9d !important;
}

/* =========================
   RECO-ITEM FLEX AJUSTADO
========================= */
.reco-item {
    display: flex;
    align-items: center;       /* centra verticalmente todos los elementos */
    justify-content: space-between; 
    gap: 6px;                  /* separación entre botón y nombre de dominio */
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
    #bdForm {
        flex-wrap: wrap;
    }

    #bdForm input,
    #bdForm select,
    .btn-search,
    .btn-transfer {
        width: 100%;
        justify-content: center;
    }

    .reco-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* =========================
   SPINNER ANIMACIÓN
========================= */
@keyframes spin {
    to { transform: rotate(360deg); }
}