/*======================================
Theme Name: WordPress Child Theme Atomion
Theme URI: https://marketpress.de
Description: Das Atomion Child Theme
Version: 1.0
Author: MarketPress
Author URI: https://marketpress.de
Template: wordpress-theme-atomion
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
======================================*/

/* You can start adding your own styles here. Use !important to overwrite styles if needed. */

/* ==========================================================================
   ADVANCED WOO SEARCH: KOMPLETT-FIX (RAHMEN, HÖHE & GROSSE SCHRIFT)
   ========================================================================== */

/* 1. CONTAINER-BASIS (Verhindert Abschneiden nach unten) */
.aws-container, 
.aws-container .aws-search-form {
    display: flex !important;
    align-items: stretch !important;
    height: 55px !important; /* Etwas mehr Platz für die große Schrift */
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* 2. DAS EINGABEFELD (VOLLSTÄNDIGER RAHMEN & TEXT) */
body .aws-container .aws-search-field {
    font-size: 20px !important; /* Schön groß und lesbar */
    height: 55px !important;
    line-height: 55px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    
    /* Rahmen-Fix: Rundherum pink, außer rechts (da dort der Button ist) */
    border: 2px solid #ff3388 !important;
    border-right: none !important;
    border-radius: 5px 0 0 5px !important;
    
    background-color: #ffffff !important;
    color: #000000 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none; /* Verhindert Standard-iOS-Schatten */
}

/* Fokus-Effekt beim Reinklicken */
body .aws-container .aws-search-field:focus {
    outline: none !important;
    background-color: #fff !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 3. DER SUCH-BUTTON (Zentrierung & Lupe Weiß) */
body .aws-container .aws-search-btn {
    background-color: #ff3388 !important; /* Pinker Hintergrund */
    height: 55px !important;
    min-width: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;    /* Vertikal zentrieren */
    justify-content: center !important; /* Horizontal zentrieren */
    
    border: 2px solid #ff3388 !important;
    border-radius: 0 5px 5px 0 !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

/* Lupe RADIKAL weiß färben */
.aws-container .aws-search-form .aws-search-btn .aws-search-btn-icon svg,
.aws-container .aws-search-form .aws-search-btn .aws-search-btn-icon svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.aws-container .aws-search-btn-icon svg {
    filter: brightness(0) invert(1) !important;
}

/* Zentrierung optimieren */
.aws-container .aws-search-form .aws-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icon-Größe & Anzeige */
.aws-container .aws-search-form .aws-search-btn .aws-search-btn-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
}
/* 4. DIE LIVE-ERGEBNISSE (DROPDOWN-OPTIK) */
/* Titel: Groß und Fett */
.aws-search-result .aws_result_title, 
.aws-search-result .aws-title {
    font-size: 17px !important;
    color: #000000 !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
}

/* Preis: Pink */
.aws-search-result .aws_result_price, 
.aws-search-result .aws-price {
    font-size: 17px !important;
    color: #ff3388 !important;
    font-weight: 700 !important;
}

/* Abstand zwischen den Ergebnissen */
.aws-search-result {
    padding: 12px !important;
    border-bottom: 1px solid #eee !important;
}

/* ==========================================================================
   KOMPLETTE LAGERSTANDS-OPTIK (ANIMIERT & FARBIG) - FINAL FIX
   ========================================================================== */

/* 1. Basis-Styling */
p.stock {
    font-weight: 700 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    border-radius: 25px !important;
    width: fit-content !important;
    margin: 15px 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

p.stock::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

/* 2. Keyframes (Müssen VOR dem Aufruf definiert sein) */
@keyframes pulse-green-final {
    0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

@keyframes pulse-orange-fast {
    0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(230, 126, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
}

/* 3. Zustände */

/* GRÜN: Vorrätig */
p.stock.in-stock {
    color: #27ae60 !important;
    background-color: #f0fff4 !important;
    border: 1px solid #c6f6d5 !important;
}
p.stock.in-stock::before {
    background-color: #27ae60 !important;
    animation: pulse-green-final 2s infinite !important;
}

/* ORANGE: Wenige (Überschreibt Grün, falls beide Klassen da sind) */
body p.stock.low-stock, 
body p.stock.in-stock.low-stock {
    color: #d35400 !important;
    background-color: #fff5eb !important;
    border: 1px solid #ffe8cc !important;
}
body p.stock.low-stock::before, 
body p.stock.in-stock.low-stock::before {
    background-color: #e67e22 !important;
    animation: pulse-orange-fast 0.8s infinite !important; /* Hier ist der Speed! */
    display: inline-block !important;
}

/* ROT: Ausverkauft */
p.stock.out-of-stock {
    color: #c0392b !important;
    background-color: #fff5f5 !important;
    border: 1px solid #feb2b2 !important;
}
p.stock.out-of-stock::before {
    background-color: #e74c3c !important;
    animation: none !important;
    box-shadow: none !important;
}