/* Base wrapper */
.search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 36px;   /* icon size */
    height: 36px;
    overflow: visible;
    z-index: 10;
}

/* When active, wrapper expands to make room for input */
.search-wrapper.active {
    width: 230px;  /* horizontal: 36 icon + gap + 180 input + extra */
}

/* Shared button */
.elementor-widget-search_toggle .search-toggle {
    align-items: center;
    background: #fdf9f6;
    border-radius: 50%;
    border: none;
/*     box-shadow: 0 0 0 1px #ccc; */
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

/* ========== 1) HORIZONTAL, icon LEFT, input expands RIGHT ========== */

.search-horizontal-right {
    flex-direction: row;
    align-items: center;
}

.search-horizontal-right .search-input {
    flex: 0 0 auto;
    width: 0;
    opacity: 0;
    border: none;
    outline: none;
    padding: 0;
    margin-left: 6px; /* gap between icon and input */
    font-size: 14px;
    box-shadow: 0 0 0 1px transparent;
    border-radius: 18px;
    transition:
        width 0.25s ease,
        opacity 0.25s ease,
        padding 0.25s ease,
        box-shadow 0.25s ease;
}

.search-horizontal-right.active .search-input {
    width: 180px;
    opacity: 1;
    padding: 6px 10px;
    box-shadow: 0 0 0 1px #ccc;
}

/* ========== 2) HORIZONTAL, icon RIGHT, input expands LEFT ========== */

.search-horizontal-left {
    flex-direction: row-reverse; /* icon on the right, input on the left */
    align-items: center;
}

.search-horizontal-left .search-input {
    flex: 0 0 auto;
    width: 0;
    opacity: 0;
    border: none;
    outline: none;
    padding: 0;
    margin-right: 6px; /* gap between icon and input */
    font-size: 14px;
    box-shadow: 0 0 0 1px transparent;
    border-radius: 18px;
    transition:
        width 0.25s ease,
        opacity 0.25s ease,
        padding 0.25s ease,
        box-shadow 0.25s ease;
}

.search-horizontal-left.active .search-input {
    width: 180px;
    opacity: 1;
    padding: 6px 10px;
    box-shadow: 0 0 0 1px #ccc;
}

/* ========== 3) VERTICAL, icon TOP, input BELOW ========== */

.search-vertical-left,
.search-vertical-right {
    flex-direction: column;
}

/* When any vertical layout is active, grow height instead of width */
.search-vertical-left.search-wrapper,
.search-vertical-right.search-wrapper {
    width: 36px;
    height: 36px;
}

.search-vertical-left.search-wrapper.active,
.search-vertical-right.search-wrapper.active {
    height: 80px; /* enough for icon + input */
}

.search-vertical-left .search-toggle,
.search-vertical-right .search-toggle {
    margin-bottom: 4px;
}

.search-vertical-left .search-input,
.search-vertical-right .search-input {
    width: 180px;
    max-height: 0;
    opacity: 0;
    padding: 0 10px;
    border: none;
    outline: none;
    font-size: 14px;
    box-shadow: 0 0 0 1px transparent;
    border-radius: 18px;
    overflow: hidden;
    transition:
        max-height 0.25s ease,
        opacity 0.25s ease,
        box-shadow 0.25s ease,
        padding 0.25s ease;
}

/* vertical-left: left alignment (default) */
.search-vertical-left {
    align-items: flex-start;
}

/* vertical-right: right alignment */
.search-vertical-right {
    align-items: flex-end;
}

.search-vertical-left.active .search-input,
.search-vertical-right.active .search-input {
    max-height: 40px;
    opacity: 1;
    padding: 6px 10px;
    box-shadow: 0 0 0 1px #ccc;
}

/* ========== BLX PRODUCT CATEGORY MENU  ========== */

.blx-search-layout {
    display: flex;
    --blx-left-width: 90%;
    --blx-right-width: 10%;
    transition: --blx-left-width 0.25s ease, --blx-right-width 0.25s ease;
}

.blx-search-layout > .blx-col-left {
    flex: 0 0 var(--blx-left-width);
    max-width: var(--blx-left-width);
    transition: flex-basis 0.25s ease, max-width 0.25s ease;
}

.blx-search-layout > .blx-col-right {
    flex: 0 0 var(--blx-right-width);
    max-width: var(--blx-right-width);
    transition: flex-basis 0.25s ease, max-width 0.25s ease;
}

/* When search is active inside right column, shift ratio */
.blx-search-layout .search-wrapper.active ~ *,
.blx-search-layout .search-wrapper.active {
    /* selector hack to ensure CSS variable changes on parent */
}

.blx-search-layout .search-wrapper.active {
    /* override on parent via :has if supported */
}

/* Fallback: use a utility class added via JS (see below) */
.blx-search-layout.blx-search-open {
    --blx-left-width: 80%;
    --blx-right-width: 20%;
}