/*
=========================================
 AvtoMapa 2.0
 assets/css/style.css
=========================================
*/

:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;

    --success:#198754;

    --warning:#ffc107;

    --danger:#dc3545;

    --dark:#212529;

    --light:#f8f9fa;

    --gray:#6c757d;

    --border:#dee2e6;

    --radius:14px;

    --shadow:0 6px 20px rgba(0,0,0,.08);

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:#f5f7fb;

    color:#212529;

    font-family:
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

    font-size:16px;

    line-height:1.6;

}

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

.navbar{

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.navbar-brand{

    font-size:1.5rem;

    font-weight:700;

}

/* ==============================
HERO
============================== */

.hero{

    background:linear-gradient(
    135deg,
    #0d6efd,
    #0b5ed7);

    color:#fff;

    padding:70px 30px;

    border-radius:20px;

    margin-bottom:30px;

}

.hero h1{

    font-size:2.7rem;

    font-weight:700;

}

.hero p{

    font-size:1.15rem;

    opacity:.95;

}

/* ==============================
BUTTONS
============================== */

.btn{

    border-radius:10px;

    transition:.25s;

}

.btn:hover{

    transform:translateY(-2px);

}

/* ==============================
CARDS
============================== */

.card{

    border:none;

    border-radius:16px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.card:hover{

    transform:translateY(-4px);

}

.card-title{

    font-weight:700;

}

/* ==============================
MAP
============================== */

#map{

    width:100%;

    height:650px;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.leaflet-container{

    border-radius:18px;

}

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

.search-box{

    background:#fff;

    padding:20px;

    border-radius:18px;

    margin-bottom:25px;

    box-shadow:var(--shadow);

}

.search-box input{

    border-radius:10px;

}

.search-box select{

    border-radius:10px;

}

/* ==============================
TABLES
============================== */

.table{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

}

.table thead{

    background:var(--primary);

    color:#fff;

}

/* ==============================
FORMS
============================== */

.form-control{

    border-radius:10px;

}

.form-select{

    border-radius:10px;

}

textarea{

    resize:vertical;

}

/* ==============================
PROFILE
============================== */

.profile-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:var(--shadow);

}

/* ==============================
DASHBOARD
============================== */

.dashboard-box{

    background:#fff;

    padding:25px;

    border-radius:16px;

    box-shadow:var(--shadow);

    text-align:center;

}

.dashboard-box h2{

    font-size:2rem;

    font-weight:700;

    color:var(--primary);

}

/* ==============================
FOOTER
============================== */

footer{

    margin-top:70px;

    background:#fff;

}

footer a{

    color:#495057;

}

footer a:hover{

    color:var(--primary);

}

/* ==============================
FLASH
============================== */

.alert{

    border-radius:12px;

}

/* ==============================
LOGIN
============================== */

.auth-box{

    max-width:500px;

    margin:auto;

    background:#fff;

    padding:35px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

/* ==============================
UTILS
============================== */

.shadow-soft{

    box-shadow:var(--shadow);

}

.rounded-xl{

    border-radius:18px;

}

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

@media(max-width:992px){

.hero{

padding:45px 25px;

}

.hero h1{

font-size:2rem;

}

#map{

height:520px;

}

}

@media(max-width:768px){

.navbar-brand{

font-size:1.3rem;

}

.hero{

text-align:center;

}

.hero h1{

font-size:1.8rem;

}

.hero p{

font-size:1rem;

}

#map{

height:420px;

}

.dashboard-box{

margin-bottom:20px;

}

.card{

margin-bottom:20px;

}

}

@media(max-width:576px){

.container{

padding-left:15px;

padding-right:15px;

}

.hero{

padding:35px 20px;

}

.hero h1{

font-size:1.6rem;

}

.btn{

width:100%;

margin-bottom:10px;

}

#map{

height:350px;

}

.auth-box{

padding:25px;

}

}