/*==================================================*
* TIPA MART
* SEARCH RESULTS
*==================================================*/


/*==================================================*
* SEARCH HEADER
*==================================================*/

.search-page{

    padding:40px 0 70px;

    background:#F7F8FA;

}


/*==================================================*
* SEARCH HEADER CONTENT
*==================================================*/

.search-page__header{

    margin-bottom:30px;

}


.search-page__title{

    margin:0 0 8px;

    color:#082C6C;

    font-size:32px;

    font-weight:700;

    line-height:1.2;

}


.search-page__subtitle{

    margin:0;

    color:#777;

    font-size:15px;

    line-height:1.6;

}

/*==================================================*
* SEARCH LAYOUT
*==================================================*/

.search__layout{

    display:grid;

    grid-template-columns:290px minmax(0,1fr);

    gap:30px;

    align-items:start;

}


/*==================================================*
* SEARCH SIDEBAR
*==================================================*/

.search__sidebar{

    width:100%;

    min-width:0;

}


/*==================================================*
* SEARCH CONTENT
*==================================================*/

.search__content{

    min-width:0;

}


/*==================================================*
* SEARCH SUMMARY
*==================================================*/

.search-summary{

    margin:0 0 24px;

    padding:18px 20px;

    background:#FFFFFF;

    border:1px solid #E5E5E5;

    border-radius:10px;

    color:#555555;

}


.search-summary p{

    margin:0;

}


.search-summary strong{

    color:#082C6C;

    font-weight:700;

}


/*==================================================*
* RESPONSIVE
*==================================================*/

@media (max-width:992px){

    .search__layout{

        grid-template-columns:240px minmax(0,1fr);

        gap:20px;

    }

}


@media (max-width:768px){

    .search__layout{

        grid-template-columns:1fr;

        gap:20px;

    }

}

.search-page__input{

    flex:1;

    min-width:0;

    height:52px;

    padding:0 18px;

    border:1px solid #DCDCDC;

    border-right:none;

    border-radius:8px 0 0 8px;

    background:#FFFFFF;

    color:#222;

    font-family:inherit;

    font-size:15px;

    outline:none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}


.search-page__input:focus{

    border-color:#082C6C;

    box-shadow:0 0 0 3px rgba(8,44,108,.08);

}


.search-page__button{

    height:52px;

    padding:0 26px;

    border:none;

    border-radius:0 8px 8px 0;

    background:#082C6C;

    color:#FFFFFF;

    font-family:inherit;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:
        background-color .25s ease,
        transform .2s ease;

}


.search-page__button:hover{

    background:#061F4D;

}


.search-page__button i{

    margin-right:7px;

}


/*==================================================*
* SEARCH SUMMARY
*==================================================*/

.search-summary{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:15px;

    margin:0 0 28px;

    padding:16px 20px;

    background:#FFFFFF;

    border:1px solid #E8E8E8;

    border-radius:10px;

}


.search-summary p{

    margin:0;

    color:#666;

    font-size:14px;

    line-height:1.6;

}


.search-summary strong{

    color:#082C6C;

    font-weight:700;

}


/*==================================================*
* SEARCH RESULTS GRID
*==================================================*/

.search-page .products__grid{

    width:100%;

}


/*==================================================*
* EMPTY SEARCH RESULTS
*==================================================*/

.search-page .alert{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:280px;

    padding:50px 30px;

    background:#FFFFFF;

    border:1px solid #E8E8E8;

    border-radius:12px;

    color:#777;

    text-align:center;

    font-size:15px;

}


.search-page .alert::before{

    content:"\f002";

    margin-bottom:18px;

    color:#F5B51D;

    font-family:"Font Awesome 6 Free";

    font-size:48px;

    font-weight:900;

}


/*==================================================*
* SEARCH LAYOUT
*==================================================*/

.search__layout{

    display:grid;

    grid-template-columns:290px minmax(0,1fr);

    gap:30px;

    align-items:start;

}


/*==================================================*
* SEARCH SIDEBAR
*==================================================*/

.search__sidebar{

    width:100%;

    min-width:0;

}


/*==================================================*
* SEARCH CONTENT
*==================================================*/

.search__content{

    min-width:0;

}


/*==================================================*
* SEARCH SUMMARY
*==================================================*/

.search-summary{

    margin:0 0 24px;

    padding:18px 20px;

    background:#FFFFFF;

    border:1px solid #E5E5E5;

    border-radius:10px;

    color:#555555;

}


.search-summary p{

    margin:0;

}


.search-summary strong{

    color:#082C6C;

    font-weight:700;

}


/*==================================================*
* RESPONSIVE
*==================================================*/

@media (max-width:992px){

    .search__layout{

        grid-template-columns:240px minmax(0,1fr);

        gap:20px;

    }

}


@media (max-width:768px){

    .search__layout{

        grid-template-columns:1fr;

        gap:20px;

    }

}

/*==================================================*
* RESPONSIVE
*==================================================*/

@media (max-width:768px){

    .search-page{

        padding:30px 0 50px;

    }


    .search-page__title{

        font-size:28px;

    }


    .search-page__form{

        max-width:none;

    }


    .search-summary{

        padding:14px 16px;

    }

}


@media (max-width:576px){

    .search-page{

        padding:25px 0 45px;

    }


    .search-page__title{

        font-size:24px;

    }


    .search-page__form{

        display:flex;

        flex-direction:column;

        gap:10px;

    }


    .search-page__input{

        width:100%;

        height:48px;

        border-right:1px solid #DCDCDC;

        border-radius:7px;

    }


    .search-page__button{

        width:100%;

        height:48px;

        border-radius:7px;

    }


    .search-summary{

        margin-bottom:22px;

    }

}

/*==================================================*
* SEARCH LAYOUT
*==================================================*/

.search__layout{

    display:grid;

    grid-template-columns:290px minmax(0,1fr);

    gap:30px;

    align-items:start;

}


/*==================================================*
* SEARCH SIDEBAR
*==================================================*/

.search__sidebar{

    width:100%;

    min-width:0;

}


/*==================================================*
* SEARCH CONTENT
*==================================================*/

.search__content{

    min-width:0;

}


/*==================================================*
* SEARCH SUMMARY
*==================================================*/

.search-summary{

    margin:0 0 24px;

    padding:18px 20px;

    background:#FFFFFF;

    border:1px solid #E5E5E5;

    border-radius:10px;

    color:#555555;

}


.search-summary p{

    margin:0;

}


.search-summary strong{

    color:#082C6C;

    font-weight:700;

}


/*==================================================*
* RESPONSIVE
*==================================================*/

@media (max-width:992px){

    .search__layout{

        grid-template-columns:240px minmax(0,1fr);

        gap:20px;

    }

}


@media (max-width:768px){

    .search__layout{

        grid-template-columns:1fr;

        gap:20px;

    }

}

.search__layout {
    display:grid !important;
    grid-template-columns:290px minmax(0,1fr) !important;
    gap:30px !important;
    align-items:start !important;
}

.search__sidebar {
    width:290px !important;
}

.search__content {
    min-width:0 !important;
}
/*==================================================*
* SEARCH LAYOUT
*==================================================*/

.search__layout {
    display: grid !important;
    grid-template-columns: 290px minmax(0, 1fr) !important;
    gap: 30px !important;
    align-items: start !important;
}

.search__sidebar {
    width: 290px !important;
    min-width: 0 !important;
}

.search__content {
    min-width: 0 !important;
}


/*==================================================*
* SEARCH SUMMARY
*==================================================*/

.search-summary {
    margin: 0 0 24px;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    color: #555555;
}

.search-summary p {
    margin: 0;
}

.search-summary strong {
    color: #082C6C;
    font-weight: 700;
}


/*==================================================*
* RESPONSIVE
*==================================================*/

@media (max-width: 768px) {

    .search__layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .search__sidebar {
        width: 100% !important;
    }

}

/*==================================================
  SEARCH CATEGORY TREE
==================================================*/

.search-category-tree,
.search-category-tree__children,
.search-category-tree__products {
    list-style: none;
    margin: 0;
    padding: 0;
}


/*==================================================
  CATEGORY ROW
==================================================*/

.search-category-tree__row {
    display: flex;
    align-items: center;
    min-height: 52px;
}


/*==================================================
  TOGGLE
==================================================*/

.search-category-tree__toggle {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    color: #082C6C;

    cursor: pointer;
}


.search-category-tree__toggle i {
    font-size: 10px;

    transition: transform .2s ease;
}


.search-category-tree__parent.is-expanded
.search-category-tree__toggle i {

    transform: rotate(90deg);

}


/*==================================================
  PLACEHOLDER
==================================================*/

.search-category-tree__placeholder {
    width: 30px;
    flex: 0 0 30px;
}


/*==================================================
  CATEGORY LINK
==================================================*/

.search-category-tree__link {

    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 12px 8px 12px 0;

    color: #333;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;
}


.search-category-tree__link:hover {
    color: #082C6C;
}


/*==================================================
  COUNT
==================================================*/

.search-category-tree__count {

    min-width: 25px;
    height: 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border-radius: 20px;

    background: #F3F5F8;

    color: #082C6C;

    font-size: 11px;

    font-weight: 700;
}


/*==================================================
  SUBCATEGORIES
==================================================*/

.search-category-tree__children {

    display: none;

    margin-left: 30px;

    padding-left: 12px;

    border-left: 1px solid #E2E5E9;
}


.search-category-tree__parent.is-expanded
> .search-category-tree__children {

    display: block;
}


/*==================================================
  PRODUCTS
==================================================*/

.search-category-tree__products {

    display: none;

    margin-left: 30px;

    padding: 0 0 8px 22px;

    border-left: 1px solid #E2E5E9;
}


.search-category-tree__parent.is-expanded
.search-category-tree__children li.is-expanded
.search-category-tree__products {

    display: block;
}


/*==================================================
  PRODUCT ITEM
==================================================*/

.search-category-tree__products li a {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    padding: 7px 8px;

    color: #666;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.4;
}


.search-category-tree__products li a:hover {
    color: #082C6C;
}


.search-category-tree__products i {
    margin-top: 6px;

    font-size: 5px;

    color: #F5B51D;

    flex-shrink: 0;
}


/*==================================================
  EMPTY
==================================================*/

.search-sidebar__empty {

    padding: 15px 0;

    color: #777;

    font-size: 14px;
}