/* style.css - Naija Earn theme (Nigerian colors + modern UI) */

/* Reset + font */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(180deg,#f4fbf7 0%, #ffffff 40%);
  color: #1b1b1b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom: 80px; /* room for live alert */
}

/* Header / Navbar */
.navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: linear-gradient(90deg,#007a3d 0%, #009a4a 100%); /* Nigerian green gradient */
  color: white;
  padding: 14px 18px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}
.navbar .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:white; }
.brand svg { width:40px; height:40px; }
.navbar a { color: white; text-decoration:none; margin-left:10px; font-weight:600; }
.navbar a.sm { font-size:14px; opacity:0.95; }

/* Container */
.container {
  max-width: 920px;
  margin: 28px auto;
  padding: 22px;
}

/* Card */
.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(18, 72, 37, 0.04);
  margin-bottom: 18px;
}

/* Grid */
.row { display:flex; gap:18px; flex-wrap:wrap; }
.col { flex:1; min-width:260px; }

/* Headings */
h1,h2,h3 { color: #006838; margin-bottom:12px; }
.lead { color:#333; margin-bottom:14px; }

/* Form */
label { display:block; font-weight:600; margin-bottom:6px; color:#333; }
input[type="text"],input[type="password"],input[type="email"],select {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #e6efe8;
  background: #fbfffC;
  margin-bottom:12px;
  font-size:15px;
}
input:focus,select:focus {
  outline:none; box-shadow: 0 6px 18px rgba(0,138,61,0.08); border-color:#009a4a;
}

/* Buttons */
.btn {
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  background: linear-gradient(90deg,#009a4a 0%, #007a3d 100%);
  color:white;
  box-shadow: 0 8px 20px rgba(0,122,61,0.12);
}
.btn:hover { transform: translateY(-1px); }
.btn.secondary {
  background: #ffffff; color:#006838; border: 1px solid #d9efe1;
}
.btn.danger { background: #d9534f; box-shadow:none; }

/* Table */
.table { width:100%; border-collapse:collapse; margin-top:10px; }
.table th, .table td { padding:10px; border-bottom:1px solid #eff7f0; text-align:left; }
.table th { background:#f4fbf7; color:#006838; font-weight:700; }

/* Small text */
.small { font-size:13px; color:#666; }

/* Balance badge */
.balance {
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background: linear-gradient(90deg,#fffef0 0%, #e9f8ec 100%);
  color:#00592b;
  font-weight:800;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* Withdraw list item */
.withdraw-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; }

/* Admin panel small utilities */
.row-between { display:flex; justify-content:space-between; align-items:center; }

/* Footer live alert */
#liveAlert {
  position: fixed;
  bottom: 20px;
  left: 20px;
  max-width: 360px;
  background: linear-gradient(90deg,#009a4a,#007a3d);
  color: #fff;
  padding:12px 16px;
  border-radius:10px;
  box-shadow: 0 12px 36px rgba(2,66,33,0.16);
  z-index:9999;
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.45s ease;
  font-weight:700;
}
#liveAlert.show { transform: translateY(0); opacity:1; }

/* Responsive */
@media (max-width:720px) {
  .navbar { padding:12px; }
  .brand svg { width:34px; height:34px; }
  .container { margin:16px; padding:14px; }
}
.password-wrapper {
  position: relative;
}
.password-wrapper input {
  padding-right: 40px;
}
.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #555;
}
.fee-box {
  background: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  color: #856404;
}
.fee-box h3 {
  margin-bottom: 10px;
  color: #856404;
}