:root{
  --bg: #0a0f2c;
  --panel: #111a3a;
  --panel-2: #18214d;
  --card: #24306b;
  --card-hover: #314397;
  --accent: #87a4ff;
  --text: #ffffff;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  overflow-x: hidden;
}

.container{
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border-radius: 20px;
  padding: 30px 24px;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  text-align: center;
}

.logo img{max-width:120px;margin-bottom:14px; border-radius:4px;}
.title{
  font-family: 'Poppins', sans-serif;
  font-size:26px;font-weight:900;margin-bottom:6px;
}
.subtitle{font-size:14px;color:var(--accent);letter-spacing:2px;margin-bottom:22px;}

.section{
  background: var(--panel-2);
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 18px;
}
.section h3{
  color:var(--accent);
  margin-bottom:16px;
  font-family: 'Poppins', sans-serif;
  font-size:18px;
}

.socials{display:flex;flex-direction:column;gap:10px;}
.social-card{
  background:var(--card);
  border-radius:12px;
  transition:.25s;
  text-align:left;
  cursor: pointer; /* Added cursor pointer */
}
.social-card:hover{background:var(--card-hover);}
.social-card a{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  display: flex;
  align-items: center;
  gap:8px;
  padding: 14px 16px; /* Moved padding from card to link */
  width: 100%; /* Make link fill the card */
  height: 100%; /* Make link fill the card */
}
.social-card i{color:var(--accent);font-size:18px;}
.social-card .handle{
  color:#c9d2ff;
  font-size:13px;
  padding: 0 16px 14px 42px; /* Adjusted padding for proper alignment */
  margin-top: -8px; /* Slight adjustment to position closer to link */
}

.wifi-box{
  position: relative;
  background: var(--card);
  border-radius: 12px;
  padding: 16px 52px 16px 16px;
  margin-bottom: 12px;
  text-align: left;
  transition: background-color 0.2s ease;
}
.wifi-box:hover {
  background: var(--card-hover);
}
.wifi-box span{
  font-size:12px;
  color:#aab3ff;
  margin-bottom:8px;
  display:block;
  letter-spacing: 0.5px;
}
.wifi-box p{
  font-size:17px;
  font-weight:700;
  margin: 0;
}
.copy-btn{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  transition: all 0.2s ease;
}
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.copy-btn:active{
  transform:translateY(-50%) scale(.92);
}
.copy-icon {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}
.note{
  font-size:12px;
  color:#aab3ff;
  text-align:center;
  margin-top:8px;
}

.menu-placeholder{
  background: var(--card);
  border-radius: 14px;
  padding: 20px 16px;
  color: #dbe2ff;
  font-size:14px;
}

/* Toast (from top) */
/* Toast (from bottom) */
#toast{
  position: fixed;
  bottom: -60px; /* Changed from top: -60px */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--card-hover), var(--card));
  padding: 12px 20px;
  border-radius: 12px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .5px;
  opacity: 0;
  transition: all .35s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#toast.show{
  bottom: 20px; /* Changed from top: 20px */
  opacity: 1;
}

/* Animations */
.fade-in{opacity:0;animation:fadeIn .9s forwards;}
.slide-up{opacity:0;transform:translateY(30px);animation:slideUp .9s forwards;}
.delay-1{animation-delay:.2s;}
.delay-2{animation-delay:.4s;}

@keyframes fadeIn{to{opacity:1;}}
@keyframes slideUp{to{opacity:1;transform:translateY(0);}}

/* Ensure no horizontal scroll */
html, body {
  overflow-x: hidden;
  width: 100%;
}
/* Add this to your style.css file */
.location-text {
  color: #c9d2ff;
  font-size: 14px;
  margin-top: 12px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
}

.map-box {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}