:root {
    --enhanced-search-family: 'Inter', sans-serif;
    --enhanced-search-family-heading: 'Mulish', sans-serif;
    --enhanced-search-weight: 400;
    --enhanced-search-weight-meidum: 500;
    --enhanced-search-weight-bold: 700;
    --enhanced-search-letter-spacing: 0.5px;

    --enhanced-search-width: 600px;
    --enhanced-search-height: 48px;
    --enhanced-search-background: #fff;

    --enhanced-search-input-size: 16px;
    --enhanced-search-input-weight: 400;
    --enhanced-search-input-background: #f2f2f2;
    --enhanced-search-input-placeholder-color: #4c4c4c;
    --enhanced-search-input-border-active-color: #000000;
    --enhanced-search-input-paddiong: 4px 4px 4px 24px;
    --enhanced-search-input-border-radius: 24px;

    --enhanced-search-button-width: 40px;
    --enhanced-search-button-height: 40px;
    --enhanced-search-button-background: #d8232a;

    --enhanced-search-button-clear-position: 56px;
}

.enhanced-search {
    position: relative;
    display: inline-flex;
    max-width: var(--enhanced-search-width);
    width: 100%;

    form {
        position: relative;
        width: 100%;

        input[type="text"],
        input[type="search"] {
            font-family: var(--enhanced-search-family);
            font-size: var(--enhanced-search-input-size);
            font-weight: var(--enhanced-search-weight);
            letter-spacing: var(--enhanced-search-letter-spacing);
            width: 100%;
            height: var(--enhanced-search-height);
            padding: var(--enhanced-search-input-paddiong);
            background: var(--enhanced-search-input-background);
            border: 1px solid transparent;
            border-radius: var(--enhanced-search-input-border-radius);
            transition: border-color .3s cubic-bezier(0.165, 0.84, 0.44, 1);
            outline: none;

            &::placeholder {
                color: var(--enhanced-search-input-placeholder-color);
            }

            &.--active {
                border-color: var(--enhanced-search-input-border-active-color);
                transition: border-color .3s cubic-bezier(0.71, 0, 0.65, 0.34);
            }
        }

        button[type="submit"] {
            display: flex;
            align-items: center;
            justify-content: center;
            right: 6px;
            width: var(--enhanced-search-button-width);
            height: var(--enhanced-search-button-height);
            background: var(--enhanced-search-button-background);
            border: none;
            border-radius: 50%;
        }
    }

    .list {
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 6px;
        margin: 0;

        li {
            position: relative;
            display: flex;
            align-items: center;
            font-family: var(--enhanced-search-family);
            font-size: 14px;
            font-weight: var(--enhanced-search-weight-meidum);
            padding-left: 14px;
            color: #4c4c4c;

            &:before {
                content: '';
                position: absolute;
                top: 8px;
                left: 0;
                width: 4px;
                height: 4px;
                background-color: #4c4c4c;
                border-radius: 50%;
            }
        }
    }

    .stock {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: var(--enhanced-search-weight-meidum);

        &:before {
            content: '';
            display: inline-flex;
            width: 8px;
            height: 8px;
            background: #007A29;
            border-radius: 50%;
        }

        &.--in-stock {
            color: #007A29;

            &:before {
                background: #007A29;
            }
        }

        &.--out-stock {
            color: #ad1c22;

            &:before {
                background: #ad1c22;
            }
        }
    }

    .search-widgets__clear,
    .search-widgets__button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .search-widgets__clear {
        display: none;
        right: var(--enhanced-search-button-clear-position);
        cursor: pointer;

        &.--visible {
            display: block;
        }
    }

    .search-result {
        --bs-dropdown-padding-x: 16px;
        --bs-dropdown-padding-y: 24px;
        --bs-dropdown-border-color: #e5e5e5;
        --bs-dropdown-border-radius: 24px;
        --bs-dropdown-bg: var(--enhanced-search-background);
        display: none;
        width: 100%;
        margin: 0;
        box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.08);
        transform: translateY(52px);

        &.--visible {
            display: block;
        }
    }

    .search-result__output,
    .search-result__empty {
        display: none;

        &.--visible {
            display: block;
        }
    }

    .search-result__inner,
    .search-result__empty-inner {
        display: flex;
        flex-flow: column;
        gap: 24px;
    }

    .search-result__suggestion {
        display: none;
        font-family: var(--enhanced-search-family-heading);
        font-size: 20px;
        font-weight: 700;
        padding: 0 0 24px;
        border-bottom: 1px solid #f2f2f2;

        &.--visible {
            display: block;
        }
    }

    .search-result__products {
        display: flex;
        flex-flow: column;
        border-bottom: 1px solid #f2f2f2;
    }

    .search-result__product {
        padding: 0;
        margin: 0;

        > a:not(.dropdown-item):not(.btn) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 16px;
            color: #1a1a1a;
            transition: background .3s cubic-bezier(0.77, 0, 0.175, 1);

            &:hover {
                background: #f2f2f2;
            }
        }

        .name {
            font-family: var(--enhanced-search-family);
            font-size: 14px;
            font-weight: var(--enhanced-search-weight);
            letter-spacing: var(--enhanced-search-letter-spacing);
            max-width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .price {
            display: flex;
            flex-flow: column;
            align-items: flex-end;

            del {
                font-size: 12px;
                color: #4c4c4c;
            }

            ins {
                font-family: var(--enhanced-search-family);
                font-size: 14px;
                font-weight: var(--enhanced-search-weight-meidum);
                letter-spacing: var(--enhanced-search-letter-spacing);
                text-decoration: none;
            }
        }
    }

    .search-result__product-info,
    .search-result__product-meta {
        display: flex;
        align-items: center;
    }

    .search-result__product-info {
        gap: 16px;
        flex: 1;
        min-width: 0;
    }

    .search-result__product-meta {
        gap: 28px;
        flex-shrink: 0;
    }

    .search-result__categories,
    .search-result__commons {
        display: flex;
        flex-flow: column;
    }

    .search-result__commons {
        display: none;
        gap: 24px;
        width: 100%;

        &.--visible {
            display: flex;
        }

        > span {
            font-family: var(--enhanced-search-family-heading);
            font-size: 18px;
            font-weight: var(--enhanced-search-weight-bold);
            color: #1a1a1a;
            text-align: center;
        }
    }

    .search-result__commons-list {
        display: flex;
        flex-flow: column;
    }

    .search-result__category,
    .search-result__common {
        font-family: var(--enhanced-search-family);
        font-size: 14px;
        font-weight: var(--enhanced-search-weight);
        letter-spacing: var(--enhanced-search-letter-spacing);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 12px;
        background: transparent;
        border-bottom: 1px solid #f2f2f2;

        &:hover .icon {
            color: #ad1c22;
        }
    }

    .search-result__common {
        &:last-of-type {
            border-bottom: none;
        }
    }

    .search-result__view {

        a:not(.dropdown-item):not(.btn) {
            color: #1a1a1a;

            &:hover {
                color: #ad1c22;

                svg > path {
                    stroke: #ad1c22;
                }
            }
        }
    }

    .search-result__view-link {
        font-family: var(--enhanced-search-family);
        font-size: 18px;
        font-weight: 400;
        letter-spacing: var(--enhanced-search-letter-spacing);
        display: flex;
        align-items: center;
        gap: 8px;
        transition: color .3s cubic-bezier(0.77, 0, 0.175, 1), stroke .3s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .search-result__empty-inner {
        align-items: center;
    }

    .search-result__empty-message {
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 8px;

        > .text {
            font-family: var(--enhanced-search-family);
            font-size: 16px;
            font-weight: var(--enhanced-search-weight);
            letter-spacing: var(--enhanced-search-letter-spacing);
            color: #4c4c4c;
        }

        > .query {
            font-family: var(--enhanced-search-family-heading);
            font-size: 20px;
            font-weight: var(--enhanced-search-weight-bold);
        }
    }

    .search-result__empty-info {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 16px;
        background: #f2f2f2;
        border-radius: 16px;
    }
}