/**
 * Envio24 – General Component: Search Input
 *
 * @version 1.1.1
 * @package envio24-core/assets/css/general/
 *
 * OPIS (PL):
 * - Ogólny komponent inputu wyszukiwania z ikoną/przyciskiem lupy po prawej.
 *
 * ZMIANY 1.1.1 (PL):
 * - Wyczyszczono zbędne hacki na input.
 * - FIX KLUCZOWY: Zablokowano zmianę tła przycisku (lupy) na niebieski w stanie :focus.
 *   Kadence nadawał niebieskie tło po kliknięciu (focus). Teraz wymuszamy nasz kolor CTA.
 */

/* =========================================================
 * 1) Główne style kontenera inputu
 * ========================================================= */
.e24-search-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--e24-input-border) !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    overflow: hidden;
    transition: all 0.2s ease-out;
    box-shadow: none !important;
    min-height: var(--e24-input-min-height, 42px);
    position: relative;
}

/* Stan focus kontenera - NASZ KOLOR */
.e24-search-input:focus-within {
    border-color: var(--e24-input-focus-border) !important;
    background-color: var(--e24-input-focus-bg) !important;
    box-shadow: 0 0 0 2px rgba(211, 84, 0, 0.10) !important;
}

/* =========================================================
 * 2) Pole tekstowe (input)
 * ========================================================= */
/* Używamy ID formularza dla pewności nadpisania motywu */
#e24-order-form .e24-search-input__field,
.e24-search-input__field {
    flex: 1 1 auto;
    border: none !important;
    outline: none !important;
    padding: var(--e24-input-pad-y, 5px) var(--e24-input-pad-x, 14px) !important;
    font-size: var(--e24-fs-input, 18px) !important;
    color: var(--e24-text-input) !important;
    
    /* Tło zawsze przezroczyste (kolor daje kontener) */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0;
    min-height: var(--e24-input-min-height, 42px);
    -webkit-appearance: none;
    appearance: none;
}

/* BLOKADA AUTOFILL (Hack na niebieskie tło Chrome) */
#e24-order-form .e24-search-input__field:-webkit-autofill,
#e24-order-form .e24-search-input__field:-webkit-autofill:hover, 
#e24-order-form .e24-search-input__field:-webkit-autofill:focus, 
#e24-order-form .e24-search-input__field:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: var(--e24-text-input) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.e24-search-input__field::placeholder {
    font-size: var(--e24-fs-placeholder, 16px) !important;
    color: #B0B0B0 !important;
    opacity: 1;
}

/* =========================================================
 * 3) Przycisk/ikona wyszukiwania (lupa)
 * ========================================================= */
/* Dodajemy ID formularza, żeby przebić style :focus motywu */
#e24-order-form .e24-search-input__button,
.e24-search-input__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: var(--e24-input-min-height, 42px);
    padding: 0;
    margin: 0;
    
    /* Styl bazowy */
    border: none !important;
    background-color: var(--e24-orange) !important;
    color: #FFFFFF !important;
    
    cursor: pointer;
    transition: background-color 0.2s ease-out;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

/* Hover: ciemniejszy odcień */
#e24-order-form .e24-search-input__button:hover,
.e24-search-input__button:hover {
    background-color: #BE4C00 !important;
}

/* FIX: Stan FOCUS (kliknięty) – blokada niebieskiego z motywu */
#e24-order-form .e24-search-input__button:focus,
#e24-order-form .e24-search-input__button:active,
#e24-order-form .e24-search-input__button:focus-visible,
.e24-search-input__button:focus,
.e24-search-input__button:active {
    background-color: #BE4C00 !important; /* Ten sam co hover, albo bazowy var(--e24-orange) */
    outline: none !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}

.e24-search-input__button svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}