/* ============================================================
   AAWP Search Bar — search-bar.css
   Colores, bordes y botones copiados del CSS oficial de AAWP.
   ============================================================ */

/* Wrapper — mismo box model que .aawp */
.aawp-sb-wrapper {
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 100%;
    width: 100%;
}
.aawp-sb-wrapper *,
.aawp-sb-wrapper *:before,
.aawp-sb-wrapper *:after { box-sizing: border-box; }

/* Formulario — mismo borde que .aawp-box */
.aawp-sb-form {
    display: flex;
    width: 100%;
    background: #fff;
    border: 1px solid #ececec;
}

/* Input wrap */
.aawp-sb-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
}

/* Icono lupa — flex nativo (sin position:absolute) */
.aawp-sb-icon {
    flex-shrink: 0;
    color: #999;
    display: flex;
    align-items: center;
    padding: 0 6px 0 12px;
    pointer-events: none;
}

/* Input */
.aawp-sb-input {
    width: 100%;
    padding: 10px 36px 10px 0;
    border: none;
    border-right: 1px solid #ececec;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    color: #333;
    background: transparent;
}
.aawp-sb-input::placeholder { color: #999; }
.aawp-sb-input:focus { outline: none; box-shadow: none; }

/* Botón clear */
.aawp-sb-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    padding: 3px;
    line-height: 1;
}
.aawp-sb-clear:hover { color: #333; }

/* Botón Buscar — idéntico a .aawp-button--amazon */
.aawp-sb-btn {
    background: #f7dfa5;
    background: linear-gradient(180deg, #f7dfa5, #f0c14b) repeat scroll 0 0 transparent;
    border: 1px solid #9c7e31;
    border-color: #9c7e31 #90742d #786025;
    border-radius: 0 3px 3px 0;
    border-left: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    color: #111 !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    padding: 7px 18px 6px;
    text-align: center;
    white-space: nowrap;
}
.aawp-sb-btn:hover {
    background: #f5d78e;
    background: linear-gradient(180deg, #f5d78e, #eeb933) repeat scroll 0 0 transparent;
    color: #111 !important;
}
.aawp-sb-btn:active, .aawp-sb-btn:focus { outline: none; box-shadow: none; }
.aawp-sb-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Loading */
.aawp-sb-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    color: #666;
    font-size: 14px;
}

/* Spinner — naranja AAWP #e47911 */
.aawp-sb-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #ececec;
    border-top-color: #e47911;
    border-radius: 50%;
    animation: aawpSBspin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes aawpSBspin { to { transform: rotate(360deg); } }

/* Cabecera de resultados — igual que th de .aawp-table */
.aawp-sb-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 8px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 10px;
}
.aawp-sb-results-label { font-size: 14px; color: #333; }
.aawp-sb-results-label strong { color: #e47911; }

/* Botón Nueva búsqueda — idéntico a .aawp-button */
.aawp-sb-back {
    background-color: #fff;
    border: 1px solid #ccc !important;
    border-radius: 3px;
    color: #333 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    padding: 4px 10px 3px;
    text-decoration: none !important;
}
.aawp-sb-back:hover {
    background-color: #fafafa;
    color: #333 !important;
}

/* Resultados */
.aawp-sb-results { animation: aawpSBfadeIn .2s ease; }
@keyframes aawpSBfadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Mensajes */
.aawp-sb-message {
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #ececec;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}
.aawp-sb-message.is-error { color: #e74c3c; border-color: #f5c6cb; }

/* Responsive — breakpoints de AAWP */
@media (max-width: 480px) {
    .aawp-sb-form { flex-direction: column; }
    .aawp-sb-input { border-right: none; border-bottom: 1px solid #ececec; }
    .aawp-sb-btn {
        border-radius: 0 0 3px 3px;
        border-left: 1px solid #9c7e31;
        width: 100%;
        padding: 9px 12px 8px;
    }
    .aawp-sb-results-header { flex-direction: column; align-items: flex-start; }
}