@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fff8f0;
  --bg2:#fff3e8;
  --card:#ffffff;
  --card2:#fff0e0;
  --card3:#ffe8cc;
  --accent:#ff6b00;
  --accent2:#ff8c00;
  --accent3:#ffb347;
  --saffron:#ff9933;
  --india-green:#138808;
  --navy:#003366;
  --gold:#d4a017;
  --text:#1a0a00;
  --text2:#7a5c40;
  --text3:#b08060;
  --white:#ffffff;
  --shadow:0 4px 20px rgba(255,107,0,0.15);
  --shadow2:0 8px 32px rgba(255,107,0,0.25);
  --radius:14px;
  --radius2:20px;
  --nav-h:64px;
  --top-h:58px;
  --border:rgba(255,107,0,0.15);
}

body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:var(--nav-h);
}

/* ── TOP BAR ── */
.top-bar{
  background:linear-gradient(135deg,#ff6b00 0%,#ff8c00 50%,#ff9933 100%);
  padding:0 16px;
  height:var(--top-h);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  box-shadow:0 3px 16px rgba(255,107,0,0.4);
}
.logo-text{
  font-family:'Baloo 2',sans-serif;
  font-size:20px;font-weight:800;color:#fff;
  letter-spacing:0.5px;text-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.logo-text span{color:#ffe066}
.back-btn{
  background:rgba(255,255,255,0.2);border:none;color:#fff;
  width:36px;height:36px;border-radius:10px;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.top-title{font-size:16px;font-weight:700;color:#fff}
.btn-reg{
  background:#fff;color:var(--accent);
  border:none;padding:8px 16px;border-radius:20px;
  font-weight:800;font-size:13px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.btn-log{
  background:rgba(255,255,255,0.2);color:#fff;
  border:1.5px solid rgba(255,255,255,0.6);
  padding:8px 16px;border-radius:20px;font-weight:700;font-size:13px;cursor:pointer;
}

/* ── BOTTOM NAV ── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;
  border-top:2px solid rgba(255,107,0,0.15);
  display:flex;z-index:100;
  padding:6px 0 10px;
  height:var(--nav-h);
  box-shadow:0 -4px 20px rgba(255,107,0,0.1);
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;cursor:pointer;
  text-decoration:none;padding:2px 0;
}
.nav-item .ni{font-size:22px}
.nav-item span{font-size:10px;font-weight:600;color:var(--text2)}
.nav-item.active span{color:var(--accent);font-weight:800}
.nav-item.active .ni{filter:drop-shadow(0 0 6px var(--accent))}
.nav-center{position:relative;top:-10px}
.nav-center-btn{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#ff6b00,#ff9933);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  box-shadow:0 4px 16px rgba(255,107,0,0.5);
}
.nav-center span{color:var(--accent)!important;font-weight:800!important}

/* ── CARDS ── */
.card{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 2px 12px rgba(255,107,0,0.06);
}
.card-header{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.card-body{padding:16px}

/* ── BUTTONS ── */
.btn-primary{
  width:100%;
  background:linear-gradient(135deg,#ff6b00,#ff9933);
  color:#fff;border:none;padding:14px;border-radius:12px;
  font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 16px rgba(255,107,0,0.35);
  transition:transform 0.15s,box-shadow 0.15s;
}
.btn-primary:active{transform:scale(0.97);box-shadow:0 2px 8px rgba(255,107,0,0.25)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed}
.btn-outline{
  width:100%;background:transparent;color:var(--accent);
  border:2px solid var(--accent);padding:12px;border-radius:12px;
  font-size:14px;font-weight:700;cursor:pointer;
}
.btn-blue{
  background:linear-gradient(135deg,#003366,#0055aa);color:#fff;
  border:none;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;
}
.btn-green{
  background:linear-gradient(135deg,#138808,#1aa811);color:#fff;
  border:none;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;
}
.btn-sm{padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none}

/* ── FORMS ── */
.form-group{margin-bottom:16px}
.form-label{
  display:block;font-size:12px;font-weight:700;
  color:var(--text2);margin-bottom:6px;
}
.form-input{
  width:100%;
  background:#fff;
  border:2px solid rgba(255,107,0,0.2);
  border-radius:10px;padding:12px 14px;
  color:var(--text);font-size:14px;
  font-family:'Poppins',sans-serif;outline:none;
  transition:border-color 0.2s;
}
.form-input:focus{border-color:var(--accent)}
.form-input::placeholder{color:var(--text3)}
select.form-input{cursor:pointer;background:#fff}
select.form-input option{background:#fff;color:var(--text)}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.badge-green{background:rgba(19,136,8,0.12);color:#138808}
.badge-red{background:rgba(220,38,38,0.12);color:#dc2626}
.badge-yellow{background:rgba(255,107,0,0.12);color:var(--accent)}
.badge-blue{background:rgba(0,51,102,0.12);color:var(--navy)}
.badge-gray{background:rgba(122,92,64,0.1);color:var(--text2)}

/* ── SECTION ── */
.section{padding:14px 12px}
.section-title{
  font-size:15px;font-weight:800;color:var(--text);
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.divider{height:8px;background:var(--bg2)}

/* ── TABS ── */
.tabs{
  display:flex;background:var(--bg2);
  border-radius:10px;padding:4px;gap:4px;
}
.tab{
  flex:1;padding:9px;border-radius:8px;text-align:center;
  font-size:13px;font-weight:700;cursor:pointer;
  color:var(--text2);border:none;background:transparent;transition:all 0.2s;
}
.tab.active{
  background:linear-gradient(135deg,#ff6b00,#ff9933);
  color:#fff;box-shadow:0 3px 10px rgba(255,107,0,0.3);
}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:200;display:none;align-items:flex-end;
}
.modal-overlay.show{display:flex}
.modal-sheet{
  background:#fff;border-radius:24px 24px 0 0;
  width:100%;max-height:90vh;overflow-y:auto;
  padding:20px;border-top:3px solid var(--accent);
}
.modal-handle{
  width:40px;height:4px;background:rgba(255,107,0,0.3);
  border-radius:2px;margin:0 auto 16px;
}
.modal-title{
  font-size:16px;font-weight:800;margin-bottom:16px;
  text-align:center;color:var(--text);
}

/* ── TOAST ── */
#toastWrap{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);
  z-index:999;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.toast{
  background:#fff;border-radius:12px;padding:10px 20px;
  font-size:13px;font-weight:700;color:var(--text);
  border-left:4px solid var(--india-green);
  box-shadow:0 4px 16px rgba(255,107,0,0.2);
  animation:toastIn 0.3s ease;white-space:nowrap;
}
.toast.error{border-left-color:#dc2626}
.toast.info{border-left-color:var(--navy)}
@keyframes toastIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── LOADER ── */
.loader{
  display:flex;align-items:center;justify-content:center;
  padding:40px;color:var(--text2);gap:10px;
}
.spinner{
  width:22px;height:22px;
  border:3px solid rgba(255,107,0,0.2);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── UTILITY ── */
.text-accent{color:var(--accent)}
.text-green{color:var(--india-green)}
.text-red{color:#dc2626}
.text-muted{color:var(--text2)}
.text-navy{color:var(--navy)}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mb-16{margin-bottom:16px}
.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}
.gap-8{gap:8px}.gap-12{gap:12px}
.w-full{width:100%}

/* ── INDIA FLAG STRIPE (decorative) ── */
.india-stripe{
  height:4px;
  background:linear-gradient(90deg,#ff9933 33.3%,#fff 33.3%,#fff 66.6%,#138808 66.6%);
}