/*==================================================
  COSVIN FRAMEWORK
  SEARCH
  Version: 2.0.0
==================================================*/

/*==================================
CONTENEDOR
==================================*/

.cosvin-search{

    flex:1;

    max-width:760px;

    margin:0 20px;

}

/*==================================
FORMULARIO
==================================*/

.cosvin-search-form{

    position:relative;

    display:flex;

    align-items:center;

    height:56px;

    background:var(--bg-input);

    border:1px solid rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

    transition:.30s;

}

/*==================================
FOCUS
==================================*/

.cosvin-search-form:focus-within{

    border-color:var(--color-primary);

    box-shadow:
        0 0 0 4px rgba(0,255,136,.12),
        0 12px 35px rgba(0,0,0,.25);

}

/*==================================
INPUT
==================================*/

.cosvin-search-form input{

    flex:1;

    height:100%;

    background:transparent;

    border:none;

    outline:none;

    padding:0 28px;

    color:var(--text-white);

    font-size:16px;

    font-family:inherit;

}

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

.cosvin-search-form input::placeholder{

    color:rgba(255,255,255,.60);

    transition:.30s;

}

.cosvin-search-form:focus-within input::placeholder{

    opacity:.45;

}

/*==================================
BOTÓN
==================================*/

.cosvin-search-form button{

    width:62px;

    height:100%;

    border:none;

    background:transparent;

    color:var(--color-primary);

    cursor:pointer;

    transition:.30s;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cosvin-search-form button i{

    font-size:22px;

}

.cosvin-search-form button:hover{

    background:var(--color-primary);

    color:#000;

}

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

@media(max-width:992px){

    .cosvin-search{

        order:3;

        width:100%;

        max-width:100%;

        margin:12px 0 0;

    }

}

@media(max-width:768px){

    .cosvin-search-form{

        height:52px;

    }

}

/* Keep the compact desktop/tablet header on one row.  This file is loaded
   after header.css, so the intermediate layout belongs here as well. */
@media (min-width:601px) and (max-width:992px){

    .cosvin-header .cosvin-search{
        order:initial!important;
        flex:1 1 280px!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        margin:0!important;
    }

    .cosvin-header .cosvin-search-form{
        height:44px;
    }
}

@media(max-width:600px){

    .cosvin-search{

        margin:0;

    }

    .cosvin-search-form{

        height:38px;

    }

    .cosvin-search-form input{

        min-width:0;

        padding:0 14px;

        font-size:13px;

    }

    .cosvin-search-form button{

        width:44px;

    }

    .cosvin-search-form button i{

        font-size:18px;

    }

}