/* ============================================================
   Advanced Ajax Search Woo — Frontend Styles
   Inspirado en estilo Obramat: limpio, funcional, confiable
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --aasw-primary:       #e8620a;   /* naranja construcción */
    --aasw-primary-dark:  #c4500a;
    --aasw-bg:            #ffffff;
    --aasw-border:        #e0e0e0;
    --aasw-shadow-sm:     0 2px 8px rgba(0,0,0,.07);
    --aasw-shadow-lg:     0 8px 32px rgba(0,0,0,.13);
    --aasw-radius-input:  6px;
    --aasw-radius-drop:   8px;
    --aasw-text:          #1a1a1a;
    --aasw-muted:         #666;
    --aasw-hover-bg:      #fff8f4;
    --aasw-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Wrapper ---------- */
.aasw-search-wrapper {
    position:   relative;
    width:      100%;
    max-width:  680px;
    font-family: var(--aasw-font);
}

/* ---------- Search Box ---------- */
.aasw-search-box {
    display:         flex;
    align-items:     center;
    background:      var(--aasw-bg);
    border:          2px solid var(--aasw-border);
    border-radius:   var(--aasw-radius-input);
    transition:      border-color .2s, box-shadow .2s;
    overflow:        hidden;
}

.aasw-search-box:focus-within {
    border-color: var(--aasw-primary);
    box-shadow:   0 0 0 3px rgba(232,98,10,.12);
}

.aasw-search-input {
    flex:         1;
    height:       46px;
    border:       none;
    outline:      none;
    background:   transparent;
    padding:      0 14px;
    font-size:    15px;
    color:        var(--aasw-text);
    font-family:  inherit;
}

.aasw-search-input::placeholder {
    color: #aaa;
}

/* Botón lupa — igual que Obramat */
.aasw-search-button {
    flex-shrink:  0;
    width:        48px;
    height:       46px;
    background:   var(--aasw-primary);
    border:       none;
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    justify-content: center;
    color:        #fff;
    transition:   background .2s;
}

.aasw-search-button:hover {
    background: var(--aasw-primary-dark);
}

.aasw-search-button svg {
    width: 20px;
    height: 20px;
}

/* ---------- Dropdown container ---------- */
.aasw-results {
    position: absolute;
    top:      calc(100% + 4px);
    left:     0;
    width:    100%;
    z-index:  99999;
}

/* ---------- Dropdown panel ---------- */
.aasw-dropdown {
    background:    var(--aasw-bg);
    border-radius: var(--aasw-radius-drop);
    border:        1px solid var(--aasw-border);
    box-shadow:    var(--aasw-shadow-lg);
    overflow:      hidden;
    animation:     aaswSlideDown .15s ease;
}

@keyframes aaswSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Header del dropdown ---------- */
.aasw-dropdown-header {
    padding:     10px 16px;
    font-size:   11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:       var(--aasw-muted);
    border-bottom: 1px solid #f0f0f0;
    background:  #fafafa;
}

/* ---------- Resultado individual ---------- */
.aasw-item {
    display:      flex;
    align-items:  center;
    gap:          12px;
    padding:      11px 16px;
    text-decoration: none;
    border-bottom:   1px solid #f5f5f5;
    transition:   background .15s;
    background:   var(--aasw-bg);
}

.aasw-item:last-child {
    border-bottom: none;
}

.aasw-item:hover,
.aasw-item:focus {
    background: var(--aasw-hover-bg);
    outline: none;
}

/* Imagen */
.aasw-thumb {
    flex-shrink: 0;
    width:       58px;
    height:      58px;
    border-radius: 4px;
    overflow:    hidden;
    border:      1px solid #ececec;
    background:  #f8f8f8;
}

.aasw-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Texto central */
.aasw-content {
    flex: 1;
    min-width: 0; /* evita overflow */
}

.aasw-title {
    font-size:   14px;
    font-weight: 600;
    color:       var(--aasw-text);
    margin-bottom: 3px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.aasw-category {
    font-size:  12px;
    color:      var(--aasw-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.aasw-sku {
    font-size:  11px;
    color:      #aaa;
    margin-top: 2px;
}

/* Precio */
.aasw-price {
    flex-shrink: 0;
    text-align:  right;
}

.aasw-price .amount,
.aasw-price-inner {
    font-size:   15px;
    font-weight: 700;
    color:       var(--aasw-primary);
}

/* ---------- Loader ---------- */
.aasw-loader {
    padding:    20px;
    text-align: center;
    background: var(--aasw-bg);
    border:     1px solid var(--aasw-border);
    border-radius: var(--aasw-radius-drop);
    box-shadow: var(--aasw-shadow-sm);
}

.aasw-spinner {
    display:      inline-block;
    width:        24px;
    height:       24px;
    border:       3px solid #eee;
    border-top-color: var(--aasw-primary);
    border-radius: 50%;
    animation:    aaswSpin .65s linear infinite;
}

@keyframes aaswSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Empty / Error ---------- */
.aasw-empty,
.aasw-error {
    padding:       18px 16px;
    text-align:    center;
    font-size:     13px;
    color:         var(--aasw-muted);
    background:    var(--aasw-bg);
    border:        1px solid var(--aasw-border);
    border-radius: var(--aasw-radius-drop);
    box-shadow:    var(--aasw-shadow-sm);
}

.aasw-empty::before {
    content:     "🔍";
    display:     block;
    font-size:   22px;
    margin-bottom: 6px;
}

/* ---------- Footer del dropdown: "Ver todos" ---------- */
.aasw-dropdown-footer {
    display:     block;
    padding:     11px 16px;
    text-align:  center;
    font-size:   13px;
    font-weight: 600;
    color:       var(--aasw-primary);
    text-decoration: none;
    border-top:  1px solid #f0f0f0;
    background:  #fafafa;
    transition:  background .15s;
}

.aasw-dropdown-footer:hover {
    background: var(--aasw-hover-bg);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
    .aasw-search-wrapper {
        max-width: 100%;
    }
}

/* Móvil */
@media (max-width: 600px) {
    .aasw-search-input {
        height:    42px;
        font-size: 14px;
    }

    .aasw-search-button {
        width:  44px;
        height: 42px;
    }

    .aasw-results {
        /* En móvil ocupa todo el ancho de la pantalla */
        position: fixed;
        top:      auto;
        left:     0;
        right:    0;
        width:    100vw;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .aasw-dropdown {
        border-radius: 0;
        border-left:   none;
        border-right:  none;
        border-bottom: none;
    }

    .aasw-thumb {
        width:  48px;
        height: 48px;
    }

    .aasw-title {
        font-size: 13px;
    }

    .aasw-price .amount,
    .aasw-price-inner {
        font-size: 14px;
    }

    .aasw-item {
        padding: 10px 14px;
        gap:     10px;
    }
}