body { 
margin: 0; 
min-height: 100vh; 
display: flex; 
justify-content: center; 
font-family: "Segoe UI", Roboto, Arial, sans-serif; 
background: linear-gradient(180deg, #fff5f5, #ffffff); 
text-align: center; 
}
.container { 
text-align: center;
width: 100%; 
max-width: 360px; 
padding: 20px; 
font-family: roboto; 
} 
h1{ 
color: black; 
font-weight: 700; 
font-size: 26px; 
margin-bottom: 5px; 
font-family: roboto;
} 
h2{
color: gray; 
font-family: italic;
} 
#status{ 
color: rgb(18, 18, 18); 
font-family: roboto; 
}
.arrow {
font-size: 35px; 
color: #fe0804; 
animation: bounce 1s infinite; 
}
@keyframes bounce { 
0% { transform: translateY(0); 
} 50% { transform: translateY(-8px); 
} 100% { transform: translateY(0); 
} } 
.sos-btn { 
width: 180px;
height: 180px; 
border-radius: 50%; 
background: #fa0703; 
color: white; 
border: none; 
font-size: 22px; 
font-weight: bold; 
cursor: pointer; 
display: block; 
margin: 20px auto; 
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
} 
.sos-btn:active { 
background: #fa0303; 
box-shadow: 0 6px 15px rgba(255, 0, 0, 0.4); 
}
#status { 
margin-top: 15px; 
font-size: 16px; 
color: #1b7f00; 
margin-bottom: 15px; 
font-weight: 500; 
}
.map-box { 
margin-top: 20px; 
width: 280px; 
height: 180px; 
background: #ffffff; 
border-radius: 12px; 
overflow: hidden; /* VERY IMPORTANT */ 
border: 1px solid #1d1b1b; 
color: #555; 
margin: 15px auto; 
display: flex; 
border: 2px dashed #5a5454; 
align-items: center; 
justify-content: center; 
font-size: 14px; 
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
} 
.safe-buttons button { 
flex: 1; 
padding: 12px 0;
font-size: 16px; 
width: 200px; 
max-width: 300px; 
height: 55px; 
border-radius: 10px; 
border: none; 
cursor: pointer; 
font-size: 18px; 
font-weight: bold; 
justify-content: space-around; 
margin-left: auto; 
margin-right: auto; 
color: white; 
background: linear-gradient(to right, #2ecc71, #1fae5b); 
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
transition: all 0.2s ease; 
display: flex; 
flex-direction: column; 
align-items: center;
gap: 15px; 
margin-top: 20px; 
}
.cancel-btn {
margin: 15px auto 0;
width: 60%; 
padding: 10px 0; 
background: linear-gradient(to right, #ff4b4b, #d90000); 
color: white; 
border: none; 
cursor: pointer; 
border-radius: 25px; 
font-family: roboto; 
display: block; 
font-size: 14px; 
cursor: pointer; 
box-shadow: 0 6px 12px rgba(255,0 ,0, 0.3); 
margin: 18px auto; 
} 
.cancel-btn:disabled { 
background: linear-gradient(to right, #0450a1, #82d6f4); 
cursor: not-allowed; 
} 
div.safe-buttons button { 
border-radius: 10px; 
background: linear-gradient(to right, #34c607, #03e00a);
}
.sos-active {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { box-shadow: 0 0 0 rgba(255,0,0,0.6); }
  50% { box-shadow: 0 0 25px rgba(255,0,0,1); }
  100% { box-shadow: 0 0 0 rgba(255,0,0,0.6); }
}
.popup {
  display: none;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #1fae5b;
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}