:root{ --primary:#2e7d32; --bg:#f7faf7; --text:#222; --muted:#6b7280; }
*{ box-sizing:border-box }
body{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, 'Apple Color Emoji','Segoe UI Emoji'; background:var(--bg); color:var(--text) }
a{ color:var(--primary); text-decoration:none }

.container{ max-width:1100px; margin:0 auto; padding:16px }
.header{ background:#fff; border-bottom:1px solid #e5e7eb }
.header .container{ display:flex; align-items:center; justify-content:space-between }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.brand img{ height:36px }
.nav{ display:flex; gap:12px }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; color:#111; cursor:pointer }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff }
.btn.block{ width:100% }
.grid{ display:grid; gap:16px }
.grid.products{ grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden }
.card .body{ padding:12px }
.card img{ width:100%; height:160px; object-fit:cover; background:#f2f2f2 }
.price{ color:#111; font-weight:700 }
.muted{ color:var(--muted) }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.field input, .field select, .field textarea{ padding:10px 12px; border-radius:8px; border:1px solid #d1d5db; background:#fff }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap }
.footer{ padding:24px 0; text-align:center; color:var(--muted) }

.rider-apply-link {
  background: linear-gradient(135deg, #ff6b35, #ff8a65) !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
  text-decoration: none !important;
}

.rider-apply-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4) !important;
  color: white !important;
}

.badge{ padding:2px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px }


