/*=========================================
J TRAVEL
Style v1.0
=========================================*/

:root{

    --primary:#111827;
    --secondary:#2563eb;
    --success:#16a34a;
    --background:#eef2f7;
    --card:rgba(255,255,255,.94);
    --text:#222;
    --text-light:#777;
    --border:#e4e7eb;

    --radius:26px;

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

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{

    font-family:Poppins,sans-serif;
    background:var(--background);
    color:var(--text);
    overflow:hidden;
    height:100%;
}

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

header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:72px;

    padding:0 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:999;

}

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    color:white;

    font-weight:700;

    font-size:22px;

}

.logo i{

    color:#4ade80;

}

.menu button{

    width:48px;

    height:48px;

    border:none;

    border-radius:15px;

    cursor:pointer;

    font-size:20px;

    background:rgba(255,255,255,.9);

    box-shadow:var(--shadow);

}

/*=========================
MAPA
=========================*/

.map{

    position:absolute;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.fake-map{

    width:100%;

    height:100%;

    background:

    linear-gradient(#c7d8b6,#bdd8b4);

    position:relative;

}

/* Calles */

.roads,
.roads2,
.roads3{

    position:absolute;

    background:#ffffff80;

    border-radius:100px;

}

.roads{

    width:140%;

    height:12px;

    transform:rotate(28deg);

    left:-15%;

    top:35%;

}

.roads2{

    width:130%;

    height:18px;

    transform:rotate(-18deg);

    left:-5%;

    top:62%;

}

.roads3{

    width:12px;

    height:150%;

    left:55%;

    top:-15%;

}

.map-overlay{

    position:absolute;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        rgba(0,0,0,.20),

        rgba(0,0,0,.05),

        rgba(0,0,0,.35)

    );

    z-index:2;

}

/*=========================
PANEL
=========================*/

.panel{

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    max-width:520px;

    background:var(--card);

    backdrop-filter:blur(18px);

    border-radius:

    32px 32px 0 0;

    padding:25px;

    z-index:10;

    box-shadow:

    0 -10px 40px rgba(0,0,0,.15);

}

.drag{

    width:70px;

    height:6px;

    background:#ccc;

    border-radius:50px;

    margin:auto;

    margin-bottom:20px;

}

.panel h2{

    font-size:28px;

    margin-bottom:5px;

}

.panel p{

    color:var(--text-light);

    margin-bottom:25px;

}

/*=========================
INPUTS
=========================*/

.input{

    height:60px;

    display:flex;

    align-items:center;

    background:#f5f7fb;

    border-radius:18px;

    padding:0 18px;

    margin-bottom:15px;

    border:2px solid transparent;

    transition:.25s;

}

.input:hover{

    border-color:#2563eb55;

}

.input i{

    color:var(--secondary);

    font-size:18px;

    width:28px;

}

.input input{

    width:100%;

    border:none;

    background:none;

    outline:none;

    font-size:16px;

    font-family:Poppins;

}

/*=========================
BOTONES
=========================*/

.add-stop{

    width:100%;

    height:52px;

    border:none;

    border-radius:18px;

    background:#edf4ff;

    color:var(--secondary);

    font-weight:600;

    cursor:pointer;

    margin-bottom:20px;

}

.quote{

    width:100%;

    height:60px;

    margin-top:25px;

    border:none;

    border-radius:20px;

    background:var(--secondary);

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.quote:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(37,99,235,.35);

}

/*=========================
PASAJEROS
=========================*/

label{

    display:block;

    margin:15px 0 10px;

    font-weight:600;

}

.passengers{

    display:flex;

    gap:10px;

}

.passengers button{

    flex:1;

    height:48px;

    border:none;

    border-radius:15px;

    background:#f3f4f6;

    cursor:pointer;

    transition:.25s;

}

.passengers button:hover{

    background:var(--secondary);

    color:white;

}

/*=========================
VEHICULOS
=========================*/

.cars{

    display:flex;

    gap:12px;

    margin-top:10px;

}

.car{

    flex:1;

    padding:15px;

    border-radius:18px;

    background:#f8fafc;

    text-align:center;

    cursor:pointer;

    transition:.25s;

    border:2px solid transparent;

}

.car i{

    font-size:28px;

    margin-bottom:8px;

    color:#555;

}

.car span{

    display:block;

    font-size:14px;

}

.car:hover{

    transform:translateY(-3px);

}

.selected{

    border-color:var(--secondary);

    background:#edf4ff;

}

/*=========================
RESUMEN
=========================*/

.summary{

    display:none;

}

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

@media(min-width:992px){

.panel{

    width:430px;

    left:40px;

    bottom:40px;

    transform:none;

    border-radius:28px;

}

header{

    padding:0 40px;

}

}