/* ==========================================
   Search Variables
========================================== */

:root{

    --search-card-width:1200px;
    --search-card-padding:24px;
    --search-card-radius:20px;

    --search-gap:20px;

    --search-control-height:60px;
    --search-control-radius:12px;

    --search-font-size:16px;

    --search-btn-width:200px;
    --search-btn-height:60px;
    --search-btn-radius:14px;

    --search-btn-font-size:18px;

    --search-btn-bg:#6B8E23;

    --search-btn-hover:#008080;

    --search-btn-text:#ffffff;

    --search-btn-radius:12px;

    --search-btn-shadow:0 8px 18px rgba(0,0,0,.15);

    --search-btn-shadow-hover:0 12px 24px rgba(0,0,0,.20);

    --search-focus-border:#d6d6d6;

    --search-focus-shadow:0 0 0 4px rgba(180,180,180,.18);

}


/* ==========================================
   Search Card
========================================== */

.cf-search-card{

    width:100%;

    max-width:var(--search-card-width);

    margin:0 auto 24px;

    background:#81D8D0;

    border-radius:var(--search-card-radius);

    padding:var(--search-card-padding);

    box-shadow:0 8px 24px rgba(0,0,0,.12);

    overflow:visible;

}

.cf-search-body{

    width:100%;

}

/* ==========================================
  Item box focus shadow colour
========================================== */

.cf-search-form .form-control:focus,
.custom-dropdown .dropdown-search:focus{

    border-color:var(--search-focus-border);

    box-shadow:var(--search-focus-shadow);

    outline:none;

}

/* ==========================================
   Base Search Form
========================================== */

.cf-search-form{

    display:grid;

    gap:var(--search-gap);

    align-items:end;

}

.cf-search-item{

    width:100%;

}

.cf-search-form .form-control{

    width:100%;

    height:var(--search-control-height);

    border-radius:var(--search-control-radius);

    font-size:var(--search-font-size);

    padding:0 16px;

}

.cf-search-button{

    display:flex;

    justify-content:center;

}

.cf-search-button .btn{

    width:var(--search-btn-width);

    height:var(--search-btn-height);

    border-radius:var(--search-btn-radius);

    font-size:var(--search-btn-font-size);

}


/* ==========================================
   Search Button
========================================== */

.shadow-btn{

    background:var(--search-btn-bg);

    color:var(--search-btn-text);

    border:none;

    border-radius:var(--search-btn-radius);

    box-shadow:var(--search-btn-shadow);

    transition:all .3s ease;

    cursor:pointer;

}

.shadow-btn:hover{

    background:var(--search-btn-hover);

    color:var(--search-btn-text);

    transform:translateY(-2px);

    box-shadow:var(--search-btn-shadow-hover);

}

.shadow-btn:focus{

    outline:none;

    color:var(--search-btn-text);

}

.shadow-btn:active{

    transform:translateY(0);

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

/* ==========================================
   Desktop Layouts
========================================== */

/* 4 Items */
.cf-search-form.four-items{

    grid-template-columns:repeat(4,1fr);

}

/* 3 Items */
.cf-search-form.three-items{

    grid-template-columns:1fr 1fr auto;

}

/* 2 Items */
.cf-search-form.two-items{

    grid-template-columns:1fr auto;

}


/* ==========================================
   Large Desktop (1400px+)
========================================== */

@media (min-width:1400px){

    :root{

        --search-card-width:1080px;

        --search-card-padding:28px;

        --search-btn-width:200px;

        --search-control-height:46px;

        --search-btn-height:46px;

        --search-font-size:17px;

    }

}


/* ==========================================
   Desktop (1200px - 1399.98px)
========================================== */

@media (min-width:1200px) and (max-width:1399.98px){

    :root{

        --search-card-width:940px;

        --search-card-padding:24px;

        --search-btn-width:190px;

        --search-control-height:48px;

        --search-btn-height:48px;

        --search-font-size:16px;

    }

}


/* ==========================================
   Tablet Landscape (992px - 1199.98px)
========================================== */

@media (min-width:992px) and (max-width:1199.98px){

    :root{

        --search-card-width:760px;

        --search-card-padding:22px;

        --search-btn-width:240px;

        --search-control-height:48px;

        --search-btn-height:48px;

        --search-font-size:15px;

    }

    .cf-search-form{

        grid-template-columns:1fr !important;

        gap:16px;

    }

    .cf-search-button{

        justify-content:center;

    }

}


/* ==========================================
   Tablet Portrait (768px - 991.98px)
========================================== */

@media (min-width:768px) and (max-width:991.98px){

    :root{

        --search-card-width:680px;

        --search-card-padding:20px;

        --search-btn-width:240px;

        --search-control-height:46px;

        --search-btn-height:46px;

        --search-font-size:14px;

        --search-btn-font-size:18px;

    }

    .cf-search-form{

        grid-template-columns:1fr !important;

        gap:16px;

    }

    .cf-search-button{

        justify-content:center;

    }

}


/* ==========================================
   Large Mobile (576px - 767.98px)
========================================== */

@media (max-width:767.98px){

    :root{

        --search-card-width:520px;

        --search-card-padding:18px;

        --search-btn-width:280px;

        --search-control-height:48px;

        --search-btn-height:52px;

        --search-font-size:14px;

        --search-btn-font-size:18px;

    }

    .cf-search-form{

        grid-template-columns:1fr !important;

        gap:16px;

    }

    .cf-search-button{

        width:100%;

        justify-content:center;

        margin-top:8px;

    }

    .cf-search-button .btn{

        width:100%;

        max-width:280px;

    }

}


/* ==========================================
   Small Mobile (320px - 575.98px)
========================================== */

@media (max-width:575.98px){

    :root{

        --search-card-width:100%;

        --search-card-padding:16px;

        --search-card-radius:16px;

        --search-btn-width:100%;

        --search-control-height:44px;

        --search-btn-height:52px;

        --search-font-size:14px;

    }

}