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

body{
font-family:'Inter',sans-serif;
background:#f5f7fa;
color:#222;
}

.container{
max-width:1200px;
margin:auto;
padding:20px;
}

.hero{
text-align:center;
margin-top:30px;
margin-bottom:40px;
}

.hero h1{
font-size:42px;
margin-bottom:15px;
}

.hero p{
color:#666;
font-size:18px;
}

.activity-box{
background:#28a745;
color:white;
padding:18px;
border-radius:15px;
font-size:22px;
font-weight:bold;
text-align:center;
margin-bottom:30px;
}

.stats{
display:flex;
gap:20px;
margin-bottom:30px;
}

.card{
flex:1;
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
text-align:center;
}

#map{
height:600px;
border-radius:20px;
overflow:hidden;
margin-bottom:30px;
}

.add-report{
text-align:center;
margin-bottom:40px;
}

.add-report button{
background:#2D6A4F;
color:white;
border:none;
padding:18px 40px;
font-size:20px;
border-radius:15px;
cursor:pointer;
transition:.3s;
}

.add-report button:hover{
transform:scale(1.04);
}

.latest{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.report{
margin-top:20px;
padding:20px;
background:#f7f7f7;
border-radius:10px;
}

.modal{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
justify-content:center;
align-items:center;
z-index:99999;
}

.modal-content{
position:relative;
z-index:100000;
background:white;
width:95%;
max-width:700px;
border-radius:20px;
overflow:hidden;
animation:popup .25s;
}

@keyframes popup{

from{
opacity:0;
transform:scale(.9);
}

to{
opacity:1;
transform:scale(1);
}

}

.modal-header{
background:#2D6A4F;
color:white;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.modal-header span{
font-size:35px;
cursor:pointer;
}

.modal-body{

padding:25px;
padding-bottom:120px;

overflow-y:auto;

max-height:calc(100vh - 90px);

}

.modal label{
display:block;
margin-top:18px;
margin-bottom:8px;
font-weight:600;
}

.modal input,
.modal select,
.modal textarea{
width:100%;
padding:12px;
border-radius:10px;
border:1px solid #ddd;
font-size:16px;
}

.location-buttons{
margin-top:10px;
}

.location-buttons button{
background:#0077b6;
color:white;
border:none;
padding:12px 20px;
border-radius:10px;
cursor:pointer;
}

.submitButton{
margin-top:25px;
width:100%;
background:#2D6A4F;
color:white;
border:none;
padding:18px;
font-size:18px;
border-radius:12px;
cursor:pointer;
}

/* Leaflet */

.leaflet-control-container{
z-index:1 !important;
}

.leaflet-control-attribution{
z-index:1 !important;
}

.leaflet-pane{
z-index:10 !important;
}

.leaflet-top,
.leaflet-bottom{
z-index:10 !important;
}

/* ===== TELEFONY ===== */

@media (max-width:768px){

.stats{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:10px;

}

.card{

padding:18px 10px;

}

.card h3{

font-size:18px;

line-height:1.2;

}

.card p{

font-size:16px;

}

}

.submitButton{

margin-bottom:40px;

}

.loading{

margin-bottom:40px;

}