/* BaobabWiFi captive portal — lightweight mobile-first styling */
:root {
  --baobab-green: #2e7d32;
  --baobab-gold:  #f9a825;
  --ink: #1b1b1b;
  --bg: #f5f5f0;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0; color: var(--ink); background: var(--bg); line-height: 1.4;
}
header {
  background: var(--baobab-green); color: #fff; padding: 1rem 1.25rem;
}
header h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
header p { margin: 0; opacity: .9; font-size: .9rem; }
nav.lang { margin-top: .5rem; }
nav.lang a {
  color: #fff; text-decoration: none; margin-right: .75rem;
  border-bottom: 2px solid transparent; font-weight: 600; font-size: .85rem;
}
nav.lang a:hover { border-color: var(--baobab-gold); }
section { padding: 1rem 1.25rem; max-width: 640px; margin: 0 auto; }
h2 { color: var(--baobab-green); }
.talk-promo {
  background: linear-gradient(135deg, var(--baobab-gold), #ffd54f);
  border-radius: 12px; margin: 1rem; padding: 1.25rem;
}
.talk-promo h2 { color: #5d4037; margin-top: 0; }
.btn, button {
  display: inline-block; background: var(--baobab-green); color: #fff;
  border: 0; border-radius: 8px; padding: .6rem 1.1rem; font-size: 1rem;
  text-decoration: none; cursor: pointer; margin-top: .5rem;
}
.btn:hover, button:hover { background: #1b5e20; }
form.plan, .voucher form, .card form {
  background: #fff; border: 1px solid #e0e0d8; border-radius: 10px;
  padding: 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem;
}
form.plan strong { font-size: 1.15rem; }
form.plan em { color: #777; font-style: normal; font-size: .85rem; }
input {
  padding: .55rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem;
}
.card { background: #fff; margin: 1rem auto; padding: 1.25rem; border-radius: 10px; max-width: 640px; }
.err { color: #c62828; font-weight: 600; }
.ok  { color: var(--baobab-green); font-weight: 600; }