/* ============================================================
   Speicherguru Search Bar — Professional Black & Gold
   Plugin: sg-search-style v1.0.0
   ============================================================ */

/* ── Search icon: white ── */
.ast-header-search .astra-search-icon,
.ast-header-search .ast-search-icon,
.ast-header-search .ast-icon,
.ast-search-menu-icon .astra-search-icon,
.ast-search-menu-icon .ast-search-icon,
.ast-search-menu-icon .ast-icon,
.ast-header-search svg,
.ast-search-menu-icon svg,
.astra-search-icon,
.ast-search-icon,
#ast-search-icon,
.ast-header-search .astra-search-icon svg,
.ast-search-menu-icon .astra-search-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ── Search form container: dark ── */
.ast-search-menu-icon.slide-search .search-form,
.ast-search-menu-icon.ast-dropdown-active.slide-search .search-form {
    background: #111 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
}

/* ── Search input: dark ── */
.ast-search-menu-icon.slide-search .search-form .search-field,
.ast-search-menu-icon.ast-dropdown-active.slide-search input.search-field {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    min-height: 40px !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.ast-search-menu-icon.slide-search .search-field::placeholder {
    color: #888 !important;
}

.ast-search-menu-icon.slide-search .search-field:focus {
    border-color: #f2994a !important;
    box-shadow: 0 0 0 3px rgba(242,153,74,0.18) !important;
    background: #222 !important;
}

/* ── Submit button: gold ── */
.ast-search-menu-icon .search-submit {
    background: #f2994a !important;
    color: #000 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    cursor: pointer;
    font-weight: 700;
}

.ast-search-menu-icon .search-submit:hover {
    background: #e08530 !important;
}

.ast-search-menu-icon .search-submit svg {
    fill: #ffffff !important;
}

/* ── Search icon button: clean ── */
.ast-search-menu-icon {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Hamburger: no white box ── */
.ast-button-wrap button,
.ast-button-wrap .menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════
   MOBILE + TABLET (<=921px)
   Maximum-specificity dark theme for Astra toggle menu
   ════════════════════════════════════════════════ */
@media (max-width: 921px) {

    /* ── Hide the header search icon on mobile ── */
    .ast-header-search,
    .ast-search-menu-icon,
    .ast-header-break-point .ast-header-search,
    .ast-header-break-point .ast-search-menu-icon,
    .ast-mobile-header-content .ast-header-search,
    .ast-mobile-header-content .ast-search-menu-icon,
    [data-section="section-header-mobile-trigger"] .ast-header-search,
    .ast-header-break-point .ast-mobile-header-wrap .ast-header-search,
    .ast-header-break-point .ast-mobile-header-wrap .ast-search-menu-icon,
    .ast-builder-layout-element .ast-header-search,
    .ast-header-break-point [data-section*="search"],
    .site-header .ast-header-search,
    .site-header .ast-search-menu-icon {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* ── Search wrapper: dark container ──
       Double-ID trick for maximum specificity against Astra defaults */
    div#sg-mobile-search#sg-mobile-search {
        display: block !important;
        padding: 14px 16px 14px 16px !important;
        margin: 0 !important;
        background: var(--ast-global-color-0, #f2bb13) !important;
        border: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        position: relative !important;
        z-index: 999999 !important;
    }

    /* ── Disable live search suggestions on mobile ── */
    div#sg-mobile-search#sg-mobile-search [class*="live-search"],
    div#sg-mobile-search#sg-mobile-search [class*="search-results"],
    div#sg-mobile-search#sg-mobile-search [class*="astra-live"],
    div#sg-mobile-search#sg-mobile-search .ast-search-results,
    div#sg-mobile-search#sg-mobile-search ul.search-results,
    div#sg-mobile-search#sg-mobile-search .search-results-dropdown,
    [class*="live-search-results"],
    .ast-live-search-results,
    .astra-live-search-results {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ── Search form: flex row ── */
    div#sg-mobile-search#sg-mobile-search form.search-form,
    div#sg-mobile-search#sg-mobile-search .search-form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* ── Label wrapper: fill available space ── */
    div#sg-mobile-search#sg-mobile-search label.sg-search-label,
    div#sg-mobile-search#sg-mobile-search .sg-search-label {
        flex: 1 1 0% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* ── Search input: dark field with rounded corners ── */
    div#sg-mobile-search#sg-mobile-search input.search-field,
    div#sg-mobile-search#sg-mobile-search input[type="search"].search-field,
    div#sg-mobile-search#sg-mobile-search .search-form input.search-field,
    div#sg-mobile-search#sg-mobile-search .search-form input[type="search"],
    div#sg-mobile-search#sg-mobile-search label input.search-field {
        flex: 1 1 0% !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        background-color: #111111 !important;
        background-image: none !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        font-family: inherit !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        padding: 12px 16px !important;
        min-height: 44px !important;
        height: 44px !important;
        box-shadow: none !important;
        outline: none !important;
        outline-offset: 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        float: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: border-color 0.2s ease,
                    box-shadow 0.2s ease,
                    background-color 0.2s ease !important;
    }

    /* ── Placeholder: muted gray ── */
    div#sg-mobile-search#sg-mobile-search input.search-field::placeholder,
    div#sg-mobile-search#sg-mobile-search input[type="search"]::placeholder {
        color: #888888 !important;
        opacity: 1 !important;
        font-style: normal !important;
    }

    /* ── Focus state: gold glow ── */
    div#sg-mobile-search#sg-mobile-search input.search-field:focus,
    div#sg-mobile-search#sg-mobile-search input[type="search"].search-field:focus,
    div#sg-mobile-search#sg-mobile-search .search-form input.search-field:focus,
    div#sg-mobile-search#sg-mobile-search .search-form input[type="search"]:focus {
        border: 1px solid #f2994a !important;
        box-shadow: 0 0 0 3px rgba(242, 153, 74, 0.3) !important;
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        outline: none !important;
    }

    /* ── Submit button: gold with white icon ── */
    div#sg-mobile-search#sg-mobile-search button.search-submit,
    div#sg-mobile-search#sg-mobile-search .search-form button.search-submit,
    div#sg-mobile-search#sg-mobile-search .search-form button[type="submit"],
    div#sg-mobile-search#sg-mobile-search input.search-submit,
    div#sg-mobile-search#sg-mobile-search .search-form input.search-submit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        background-color: #111111 !important;
        background-image: none !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        width: 44px !important;
        cursor: pointer !important;
        font-weight: 700 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        float: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: background-color 0.2s ease,
                    box-shadow 0.2s ease,
                    transform 0.1s ease !important;
    }

    /* ── Submit hover: deeper gold ── */
    div#sg-mobile-search#sg-mobile-search button.search-submit:hover,
    div#sg-mobile-search#sg-mobile-search .search-form button.search-submit:hover,
    div#sg-mobile-search#sg-mobile-search input.search-submit:hover {
        background-color: #222222 !important;
        box-shadow: none !important;
    }

    /* ── Submit active/pressed: tactile feedback ── */
    div#sg-mobile-search#sg-mobile-search button.search-submit:active,
    div#sg-mobile-search#sg-mobile-search .search-form button.search-submit:active,
    div#sg-mobile-search#sg-mobile-search input.search-submit:active {
        background-color: #333333 !important;
        transform: scale(0.96) !important;
        box-shadow: none !important;
    }

    /* ── Submit focus-visible: accessibility ring ── */
    div#sg-mobile-search#sg-mobile-search button.search-submit:focus-visible,
    div#sg-mobile-search#sg-mobile-search .search-form button.search-submit:focus-visible {
        outline: 2px solid #ffffff !important;
        outline-offset: 2px !important;
    }

    /* ── SVG icon inside submit: white ── */
    div#sg-mobile-search#sg-mobile-search button.search-submit svg,
    div#sg-mobile-search#sg-mobile-search .search-form button.search-submit svg,
    div#sg-mobile-search#sg-mobile-search .search-submit svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: #ffffff !important;
        stroke-width: 2 !important;
        color: #ffffff !important;
        pointer-events: none !important;
    }

    /* ── Hidden submit button from override form (duplicate) ── */
    div#sg-mobile-search#sg-mobile-search .sg-search-btn,
    div#sg-mobile-search#sg-mobile-search input.sg-search-btn,
    div#sg-mobile-search#sg-mobile-search button.sg-search-btn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
    }

    /* ── Kill any Astra-injected search icon overlays ── */
    div#sg-mobile-search#sg-mobile-search .astra-search-icon,
    div#sg-mobile-search#sg-mobile-search .ast-search-icon,
    div#sg-mobile-search#sg-mobile-search .ast-icon {
        display: none !important;
    }

    /* ── Prevent Astra from adding backgrounds/borders to inner wrappers ── */
    div#sg-mobile-search#sg-mobile-search *:not(input):not(button):not(svg):not(circle):not(line) {
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /* ── Restore input and button styles after wildcard reset ── */
    div#sg-mobile-search#sg-mobile-search input.search-field {
        background-color: #111111 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    div#sg-mobile-search#sg-mobile-search input.search-field:focus {
        border-color: #f2994a !important;
        box-shadow: 0 0 0 3px rgba(242, 153, 74, 0.3) !important;
    }

    div#sg-mobile-search#sg-mobile-search button.search-submit {
        background-color: #111111 !important;
        box-shadow: none !important;
    }

    /* ── Fix mobile menu: prevent scroll/drag revealing white background ── */
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-drawer .ast-mobile-popup-overlay,
    .ast-mobile-popup-drawer .ast-mobile-popup-inner,
    .ast-mobile-popup-content,
    .ast-mobile-popup-inner,
    .ast-mobile-header-content,
    .ast-mobile-header-wrap .ast-mobile-popup-drawer {
        background-color: #111111 !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ast-mobile-popup-drawer.active .ast-mobile-popup-overlay {
        background-color: #111111 !important;
    }

    /* Lock body scroll when mobile menu is open */
    body.ast-main-header-nav-open,
    body.ast-popup-nav-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}