/*
==================================================
Rumos Answer

Filename : search.css
File Path: /wp-content/themes/rumos-answer/assets/css/search.css

Build    : 004-017
Author   : Rumos
==================================================
*/

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

.ra-search-form {

    margin-top: 48px;

}

/* ==========================================
   Search Box
========================================== */

.ra-search-box {

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 760px;

    margin: 0 auto;

    padding: 8px;

    background: #ffffff;

    border: 0px solid #E5E7EB;

    border-radius: 999px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);

}

/* ==========================================
   Search Input
========================================== */

.ra-search-input {

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    padding: 18px 24px;

    font-size: 1rem;

    color: #111827;

}

.ra-search-input::placeholder {

    color: #9CA3AF;

}

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

.ra-search-button {

    border: none;

    cursor: pointer;

    padding: 16px 34px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #5B5CF0,
        #6F8DFF
    );

    color: #ffffff;

    font-size: .95rem;

    font-weight: 600;

    transition: all .25s ease;

}

.ra-search-button:hover {

    transform: translateY(-1px);

    box-shadow:
        0 10px 25px rgba(91,92,240,.25);

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .ra-search-box{

        flex-direction:column;

        gap:12px;

        border-radius:24px;

        padding:16px;

    }

    .ra-search-input{

        width:100%;

        text-align:center;

    }

    .ra-search-button{

        width:100%;

    }

}