/* ==========================================================================
   SKAN ARTICLES SEARCH - FINAL UNIFIED STYLES
   ========================================================================== */

/* 1. Główny kontener kółka lupy */
.skan-articles-header-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centrowanie zawartości */
    background: #f5f5f5; /* Szary kolor tła */
    border: 1px solid #d1d1d1;
    border-radius: 24px; /* Idealne kółko dla wysokości 48px */
    width: 48px; /* Stała szerokość początkowa */
    height: 48px; /* Stała wysokość zapobiegająca ucinaniu */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Płynne rozwijanie */
    overflow: hidden;
    box-sizing: border-box;
}

/* Stan rozwinięty kółka do pola wyszukiwania */
.skan-articles-header-search.is-open {
    width: 300px; /* Szerokość po rozwinięciu */
}

/* 2. Przycisk lupy (Toggle) - Centrowanie absolutne */
.skan-articles-header-toggle {
    position: absolute; /* Wyciągnięcie z przepływu flex, aby nie było spychane */
    right: 0; /* Przyklejenie do prawej krawędzi kółka */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #666; /* Szary kolor ikony */
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2; /* Ikona zawsze nad polem tekstowym */
    padding: 0 !important; /* Usunięcie wymuszeń motywu */
    outline: none;
}

/* Poprawka dla samej ikony Dashicons */
.skan-articles-header-toggle .dashicons {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 3. Formularz i pole tekstowe */
.skan-articles-header-form {
    display: flex;
    flex: 1;
    opacity: 0;
    transition: opacity 0.3s;
    padding-left: 18px; /* Odstęp tekstu od lewej krawędzi */
    padding-right: 48px; /* Miejsce zarezerwowane na lupę po prawej */
    width: 0;
}

.skan-articles-header-search.is-open .skan-articles-header-form {
    opacity: 1;
    width: auto;
}

.skan-articles-header-input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    height: 48px;
    font-size: 14px;
    color: #333;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 4. Lista wyników (Dla shortcode [skan_articles]) */
.skan-articles-results-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
}

.skan-articles-result-card {
    display: flex;
    gap: 15px;
    padding: 12px 15px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    text-decoration: none;
    color: #444;
    transition: background 0.2s;
}

.skan-articles-result-card:hover {
    background: #f9f9f9;
}

/* Formatowanie: Kod artykułu + Nazwa artykułu */
.skan-articles-result-code {
    font-weight: 700;
    color: #222;
    min-width: 110px;
    flex-shrink: 0;
}

.skan-articles-result-name {
    color: #777;
}

/* Statusy wyszukiwania */
.skan-articles-loading, 
.skan-articles-empty, 
.skan-articles-error {
    padding: 15px;
    color: #999;
    font-style: italic;
    text-align: center;
}