/* ==========================================================================
   KS Search Style v1.0.0 — Frontend CSS
   Re-styles AWS (Advanced WooCommerce Search) to match the KLB-theme rounded
   search bar from frachtbedarf.de.
   ALL selectors anchor on .aws-search-form to avoid affecting other search bars.
   ========================================================================== */

/* --- The form: white background, rounded corners, subtle border + shadow --- */
.aws-search-form {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    background-color: #ffffff !important;
    border: 1.33px solid #cbd5e1 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* --- The wrapper inside the form: must fill width and host both input + icon --- */
.aws-search-form .aws-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* --- The actual input: transparent, no border, Inter 15px --- */
.aws-search-form .aws-search-field {
    flex: 1 !important;
    height: 43px !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #000000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    padding: 1px 46px 1px 15px !important; /* right padding leaves room for the search icon */
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* --- Placeholder: subtle gray --- */
.aws-search-form .aws-search-field::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}
.aws-search-form .aws-search-field::-webkit-input-placeholder { color: #6b7280 !important; opacity: 1 !important; }
.aws-search-form .aws-search-field::-moz-placeholder         { color: #6b7280 !important; opacity: 1 !important; }
.aws-search-form .aws-search-field:-ms-input-placeholder     { color: #6b7280 !important; opacity: 1 !important; }

/* --- Focus state: keep clean, no harsh outline --- */
.aws-search-form .aws-search-field:focus {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* --- Hide the AWS label visually (keep accessible for screen readers) --- */
.aws-search-form .aws-search-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- SVG search icon: appears as ::after on the wrapper, on the right side --- */
.aws-search-form .aws-wrapper::after {
    content: "" !important;
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M10.5 19C15.1944 19 19 15.1944 19 10.5C19 5.80558 15.1944 2 10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19Z' stroke='%23314350' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M22 22L17 17' stroke='%23314350' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
    pointer-events: none !important; /* let clicks pass through to the clear/loader/input */
    z-index: 2 !important;
}

/* --- AWS clear button (×): position it just left of the search icon, keep visible --- */
.aws-search-form .aws-search-clear {
    position: absolute !important;
    right: 42px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    z-index: 3 !important;
}
.aws-search-form .aws-search-clear:hover {
    color: #314350 !important;
}
.aws-search-form .aws-search-clear span {
    font-size: 18px !important;
    line-height: 18px !important;
}

/* --- AWS loader: position it where the clear button sits --- */
.aws-search-form .aws-loader {
    right: 42px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
}

/* --- Search results dropdown: keep it aligned to the form, with matching radius --- */
.aws-search-form ~ .aws-search-result,
.aws-container .aws-search-result {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}

/* --- Mobile: keep form full-width but reduce horizontal padding --- */
@media (max-width: 600px) {
    .aws-search-form {
        height: 42px !important;
    }
    .aws-search-form .aws-search-field {
        height: 40px !important;
        font-size: 14px !important;
        padding: 1px 42px 1px 12px !important;
    }
    .aws-search-form .aws-wrapper::after {
        right: 9px !important;
        width: 22px !important;
        height: 22px !important;
        background-size: 22px 22px !important;
    }
    .aws-search-form .aws-search-clear,
    .aws-search-form .aws-loader {
        right: 38px !important;
    }
}