/* ============================================================================
   BILA — SHARED DESIGN TOKENS & REUSABLE UI ATOMS
   Load this on EVERY page (customer pages, admin pages) before any
   page-specific stylesheet. This is what keeps login.php, register.php,
   account.php, and the admin panel visually consistent with index.php.
   ============================================================================ */

:root{
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --ink:#171C1A;
  --muted:#767B77;
  --accent:#21463B;
  --accent-soft:#E7EFEC;
  --line:#E7E5DE;
  --danger:#B23B2E;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Archivo',sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* ---- Buttons ---- */
.btn-primary{
  background:#F4F2EC;
  color:var(--accent);
  border:none;
  border-radius:100px;
  padding:15px 20px;
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:14px;
  width:100%;
  cursor:pointer;
  letter-spacing:0.2px;
}
.btn-secondary{
  background:var(--surface);
  color:var(--accent);
  border:1.5px solid var(--accent);
  border-radius:100px;
  padding:13.5px 20px;
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:13px;
  width:100%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}
.btn-secondary svg{width:16px; height:16px; fill:var(--accent);}

.icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--ink);
  position:relative;
}
.icon-btn svg{width:22px; height:22px;}

/* ---- Form fields (used by login/register/checkout/personal order/errand/support) ---- */
.field-label{
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color:var(--muted);
  margin-bottom:7px;
  display:block;
}
.field{
  width:100%;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:10px;
  padding:12px 13px;
  font-family:'Archivo',sans-serif;
  font-size:13px;
  color:var(--ink);
  margin-bottom:18px;
  outline:none;
}
textarea.field{resize:none; height:80px;}

.disclaimer{
  background:var(--accent-soft);
  border:1px solid #CFE0D9;
  border-radius:10px;
  padding:12px 13px;
  font-size:11.5px;
  line-height:1.6;
  color:#3A5A50;
  margin-bottom:18px;
}
.geo-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--accent-soft);
  border:1px solid #CFE0D9;
  color:var(--accent);
  font-weight:600;
  font-size:12.5px;
  padding:11px 13px;
  border-radius:10px;
  width:100%;
  margin-bottom:18px;
  cursor:pointer;
}
.geo-btn svg{width:15px; height:15px;}
.geo-status{font-size:11.5px; color:var(--muted); margin:-12px 0 18px; padding:0 2px;}