:root {
  --accent: #2c7be5;
  --muted: #666;
  --card-bg: #fff;
  --page-bg: #f6f8fb;
  --radius: 10px;
}

* { 
  box-sizing: border-box; 
  font-family: Arial, sans-serif; 
}
body {
   margin: 0; 
   background: 
   var(--page-bg); 
   color: #222; 
  }
header { 
  background: white; 
  border-bottom: 1px solid #e6e9ef; 
  padding: 14px 24px; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; }
.brand { 
  font-weight:700; 
  color:var(--accent); 
  text-decoration:none;
 }

nav a { 
  margin-left:12px; 
  text-decoration:none; 
  color:#333; 
}

.container { 

  max-width: 900px;
  margin: 20px auto;
  padding: 20px;

}

.event-grid { 
  display:grid; 
  grid-template-columns: 
  repeat(auto-fill, minmax(260px, 1fr)); 
  gap:18px;
 }
.card { 
  background:var(--card-bg); 
  border-radius:var(--radius); 
  padding:12px; 
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
 }
.card img { 
  width:100%; 
  height:140px; 
  object-fit:cover;
   border-radius:8px;
 }
.meta { 
  font-size:0.9rem; 
  color:var(--muted); 
  margin-top:8px;
 }
.badge { 
  display:inline-block; 
  padding:4px 8px; 
  border-radius:999px; 
  background:#eef6ff;
   color:var(--accent); 
   font-weight:600; 
   font-size:0.8rem; 
  }
.progress { 
  width:100%; 
  background:#eee; 
  height:12px;
   border-radius:6px; 
   overflow:hidden; 
  }
.progress > i { 
  display:block; 
  height:100%; background: 
  linear-gradient(90deg,#2c7be5,#7cc1ff); 
  width:0%; }

.search-form { 
  display:flex; gap:8px; 
  flex-wrap:wrap; 
  margin-bottom:16px; }
.search-form input, .search-form select { 
  padding:8px; 
  border-radius:6px; 
  border:1px solid #ddd; 
  min-width:160px; 
}

.badge.past {
  background: #e74c3c;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 6px;
  display: inline-block;
}

.btn {
   background:var(--accent); 
   color:white; 
   padding:2px 8px; 
   border-radius:8px; 
   border:none; 
   cursor:pointer; }
.btn.secondary { background:#6c757d; }

.button{
  padding: 5px;
}

.footer { 
  text-align:center; 
  color:var(--muted); 
  margin:24px 0; 
}


.registrations-container {
  width: 900px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
  margin: auto;
}

.registration-card {
  border-left:4px solid #4caf50;
  border-radius: 5px;
  padding: 12px 16px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 420px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.registration-card p {
  margin: 5px 0;
  font-family: Arial, sans-serif;
}

 form label {
  display: block;
  margin: 5px 0 5px 0;
  font-weight: bold;
}

form input[type="text"],
form input[type="email"],
form input[type="number"] {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.95rem;
  box-sizing: border-box;
  width:100% ;
  margin: auto;
}


form input:focus{
  outline: none;
  border-color: rgb(145, 145, 250);
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
} 

button.btn {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button.btn:hover {
  background-color: sandybrown;
}

#regMsg {
  font-weight: bold;
  font-size: 0.95rem;
}

.form{
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

#regForm{

  width: 600px;
  padding: 30px;
  color: #444;
  background: #f9f9f9;

}


#eventInfo {
  font-size: 0.95rem;
  color: #444;
  background: #f9f9f9;
  border-left: 4px solid #4caf50;
  padding: 10px 12px;
  margin: 12px 0 20px 0;
  border-radius: 4px;
}

.search-form input[type="text"]{
  width: 10%;
}