/* ===================================
       DESKTOP SEARCH
    ==================================== */

    .desktop-search-section{
      padding:40px 0;
    }

    .search-wrapper{
      max-width:1180px;
      margin:auto;
      position:relative;
    }

    .search-box{
      position:relative;
    }

    .search-input{
      height:70px;
      border-radius:50px;
      border:1.5px solid #7db1ff;
      padding-left:70px;
      padding-right:20px;
      font-size:22px;
      box-shadow:none !important;
    }


    /* DROPDOWN */

    .search-dropdown{
      position:absolute;
      top:64px;
      left:0;
      width:100%;
      background:#fff;
      border-radius:8px;
      border:1px solid #ddd;
      box-shadow:0 12px 30px rgba(0,0,0,.12);
      overflow:hidden;
      z-index:99;
      display:none;
    }

    .dropdown-title{
      background:#046b3d;
      color:#fff;
      padding:15px 20px;
      font-size:18px;
      font-weight:600;
    }

    .search-list{
      list-style:none;
      margin:0;
      padding:0;
      max-height:500px;
      overflow-y:auto;
    }

    .search-list::-webkit-scrollbar{
      width:7px;
    }

    .search-list::-webkit-scrollbar-thumb{
      background:#999;
      border-radius:10px;
    }

    .search-item{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:8px 20px;
      font-size:16px;
      line-height:1.5;
      cursor:pointer;
      transition:.2s;
    }

    .search-item:hover{
      background:#f7f7f7;
      padding-left:28px;
    }

    .search-item i{
      color:#8d8d8d;
      margin-top:3px;
      flex-shrink:0;
    }

    .no-result{
      padding:20px;
      text-align:center;
      color:#888;
      font-size:16px;
    }

    /* ===================================
       MOBILE SEARCH
    ==================================== */

    .mobile-search-page{
      display:none;
      min-height:100vh;
      background:#f5f5f5;
    }

    .search-header{
      background:#e6241f;
      padding:10px 12px 14px;
      position:sticky;
      top:0;
      z-index:100;
    }

    .back-btn{
      display:flex;
      align-items:center;
      gap:6px;
      color:#fff;
      font-size:16px;
      margin-bottom:10px;
      font-weight:500;
    }

    .mobile-search-box{
      position:relative;
    }

    .mobile-search-input{
      height:46px;
      border-radius:10px;
      border:1px solid #ddd;
      padding:0 14px;
      font-size:14px;
      box-shadow:none !important;
    }

    .mobile-dropdown{
      margin-right:12px;
      background:#fff;
      border-radius:0 0 8px 8px;
      border:1px solid #ddd;
      border-top:none;
      overflow:hidden;
      box-shadow:0 3px 10px rgba(0,0,0,.12);
      display:none;
      position: absolute;
      z-index: 999999;
    }

    .mobile-dropdown-title{
      background:#046b3d;
      color:#fff;
      padding:12px 14px;
      font-size:14px;
      font-weight:500;
    }

    .mobile-search-list{
      list-style:none;
      margin:0;
      padding:0;
      max-height:450px;
      overflow-y:auto;
    }

    .mobile-search-item{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:12px 14px;
      font-size:13px;
      line-height:1.4;
      cursor:pointer;
      transition:.2s;
    }

    .mobile-search-item:hover{
      background:#f7f7f7;
    }

    .mobile-search-item i{
      color:#999;
      margin-top:2px;
      flex-shrink:0;
    }

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

    @media(max-width:991px){

      .desktop-search-section{
        display:none;
      }

      .mobile-search-page{
        display:block;
      }

    }