/* ============================================================
   AgroVerse — MODERN GRADIENT THEME (v6)
   Fresh, vibrant design with glass-morphism, gradients, and micro-interactions.
   Class names preserved for JS compatibility.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Design Tokens — Modern Vibrant ── */
  --bg:            #f0fdf4;
  --bg-2:          #ecfdf5;
  --bg-card:       #FFFFFF;
  --bg-card-2:     #f0fdf4;
  --bg-elev:       #f8fafc;

  --clr-primary:   #16a34a;
  --clr-primary-dk:#15803d;
  --clr-primary-2: #22c55e;
  --clr-green:     #16a34a;
  --clr-green-dk:  #15803d;
  --clr-green-lt:  #dcfce7;
  --clr-error:     #ef4444;
  --clr-warn:      #f59e0b;

  --txt:           #0f172a;
  --txt-1:         #0f172a;
  --txt-2:         #334155;
  --txt-3:         #64748b;
  --txt-muted:     #94a3b8;
  --bg-input:      #f8fafc;
  --line:          #e2e8f0;
  --line-2:        #cbd5e1;

  --ink:           #0f172a;
  --body:          #334155;
  --muted:         #64748b;
  --hairline:      #e2e8f0;
  --surface-soft:  #f0fdf4;
  --surface-strong:#e2e8f0;
  --surface-dark:  #14532d;

  --on-primary:    #FFFFFF;
  --on-dark:       #FFFFFF;

  --glow:          0 0 30px rgba(22,163,74,0.2);
  --glow-soft:     0 0 20px rgba(22,163,74,0.1);
  --glow-strong:   0 0 40px rgba(22,163,74,0.3);

  --gradient-primary: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
  --gradient-dark:    linear-gradient(135deg, #14532d 0%, #166534 100%);
  --gradient-card:    linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(240,253,244,0.6) 100%);
  --gradient-hero:    linear-gradient(135deg, #14532d 0%, #166534 30%, #15803d 60%, #16a34a 100%);
  --gradient-accent:  linear-gradient(135deg, #22c55e 0%, #4ade80 100%);

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Spacing (4px base) */
  --radius:    16px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --radius-pill: 9999px;
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 40px -10px rgba(0,0,0,0.1);
  --shadow-glow: 0 8px 32px rgba(22,163,74,0.25);
  --spacing-section: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: #ecfdf5;
  color: var(--txt);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before, body::after { display: none; }
#app::before { display: none; }

#app { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
input, select, textarea { font-family: inherit; }

::selection { background: rgba(10,110,58,0.15); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10,110,58,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10,110,58,0.35); }

/* ---------- Decorative dots layer ---------- */
.decoration-dots { display: none; }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.5; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ---------- Page loader ---------- */
.page-loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 9999;
}
.loader-leaf { font-size: 48px; }

/* ---------- Layout ---------- */
.app-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 24px 80px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

.section { margin-bottom: var(--spacing-section); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px; gap: 16px; flex-wrap: wrap;
}
.section-head h2, .section h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.link-more {
  color: var(--body);
  font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
}
.link-more:hover { gap: 12px; color: var(--clr-green); }

.page-head { margin-bottom: 32px; }
.page-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--txt);
  line-height: 1.15;
}
.page-desc { color: var(--body); margin-top: 8px; font-size: 14px; }

.grad-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   NAVBAR — Glass-morphism floating nav
   ============================================================ */
.navbar {
  position: fixed; top: 12px; left: 12px; right: 12px;
  z-index: 1000;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  height: 56px;
}
.nav-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.nav-logo, .logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.5px; color: var(--txt);
}
.logo-leaf, .nav-logo .logo-leaf {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--gradient-primary);
  color: #ffffff; font-size: 16px; font-weight: 700;
  box-shadow: var(--shadow-glow);
}
.logo-text { display: inline-flex; gap: 2px; }
.logo-text b { color: var(--clr-green); font-weight: 800; }

.nav-links {
  display: flex; align-items: center; gap: 2px;
}
.nav-link {
  position: relative;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 13px; font-weight: 500;
  color: var(--body);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.nav-link .nav-ic { font-size: 14px; opacity: 0.7; }
.nav-link:hover { color: var(--txt); background: rgba(22,163,74,0.06); }
.nav-link.active {
  color: var(--clr-green);
  background: var(--clr-green-lt);
  font-weight: 600;
}
.nav-link.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 1px;
  background: var(--clr-green);
}
.nav-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 11px; font-weight: 700;
  background: var(--clr-green); color: var(--on-primary);
  display: inline-grid; place-items: center;
}
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-tx { color: var(--clr-green); font-weight: 600; font-size: 13px; }

.user-chip, .user {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
}
.user-chip .profile-avatar, .user .profile-avatar {
  width: 28px; height: 28px; font-size: 12px;
}

.nav-burger { display: none; font-size: 20px; color: var(--ink); }

/* Language select */
.lang-select {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--body);
  border-radius: 6px;
  padding: 6px 8px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: border-color 0.15s;
  max-width: 72px; text-align: center;
}
.lang-select:hover { border-color: var(--line-2); }
.lang-select:focus { outline: none; border-color: var(--clr-green); }
.lang-select option { background: var(--bg); color: var(--txt); }

/* ============================================================
   BUTTONS — Modern gradient buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
  color: var(--txt);
  border: 1px solid var(--hairline);
  background: var(--bg-card);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: var(--shadow);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--gradient-primary);
  color: var(--on-primary);
  font-weight: 700;
  border: none;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(22,163,74,0.35);
  filter: brightness(1.05);
}

.btn-outline, .btn-ghost {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  color: var(--txt);
  box-shadow: none;
}
.btn-outline:hover, .btn-ghost:hover {
  background: var(--clr-green-lt);
  border-color: var(--clr-green);
  color: var(--clr-green);
  box-shadow: var(--shadow);
}
.btn:hover { border-color: var(--line-2); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--gradient-primary);
  color: var(--on-primary);
  font-weight: 600;
  border: none;
}
.btn-primary:hover {
  background: var(--clr-green-dk);
  filter: brightness(1.05);
}

.btn-outline, .btn-ghost {
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.btn-outline:hover, .btn-ghost:hover {
  background: var(--surface-soft);
  border-color: var(--line-2);
}

.btn-danger {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--clr-error);
}
.btn-danger:hover { background: #fef2f2; border-color: var(--clr-error); }

.btn-approve {
  background: var(--clr-green-lt);
  border: 1px solid rgba(10,110,58,0.2);
  color: var(--clr-green);
}
.btn-approve:hover { background: rgba(10,110,58,0.18); border-color: var(--clr-green); }
.btn-reject {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--clr-warn);
}
.btn-reject:hover { background: #fffbeb; border-color: var(--clr-warn); }

.btn-logout {
  background: transparent; border: 1px solid var(--hairline);
  color: var(--body); width: 36px; height: 36px; padding: 0; border-radius: 8px;
  font-size: 15px; display: inline-grid; place-items: center; cursor: pointer;
}
.btn-logout i { font-size: 15px; line-height: 1; }
.btn-logout:hover { color: var(--clr-error); border-color: var(--clr-error); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-full { width: 100%; }

/* ============================================================
   CARDS (generic) — Glass-morphism cards
   ============================================================ */
.card, .form-card, .edit-card, .profile-card, .wallet-card,
.stat-card, .order-card, .order-panel {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card { padding: 28px; }
.card-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; margin-bottom: 16px;
  color: var(--txt);
}
.card { padding: 24px; }
.card-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; margin-bottom: 16px;
  color: var(--ink);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  background: var(--surface-soft); color: var(--body);
  border: 1px solid var(--hairline);
}

/* utility */
.hidden { display: none !important; }
.back-link { color: var(--body); font-size: 14px; display: inline-flex; gap: 6px; margin-bottom: 18px; transition: color 0.15s; }
.back-link:hover { color: var(--ink); }

/* ============================================================
   HERO — Modern gradient hero
   ============================================================ */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: clamp(48px, 7vw, 80px) clamp(28px, 5vw, 72px);
  margin-bottom: 60px;
  border: none;
  background: var(--gradient-hero);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(22,163,74,0.15);
}
.hero-glow { display: none; }
.hero-content { position: relative; z-index: 2; max-width: 640px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff; font-size: 13px; font-weight: 600;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800; line-height: 1.05; letter-spacing: -1px;
  color: #ffffff; margin-bottom: 20px;
}
.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.8); margin-bottom: 32px; max-width: 520px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap;
}
.hero-stats .stat { display: flex; flex-direction: column; }
.hero-stats .stat b, .hero-stats .stat .big {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800; color: #ffffff;
}
.hero-stats .stat span { color: rgba(255,255,255,0.7); font-size: 13px; }
.hero-art { display: none; }

.art-blob, .art-1, .art-2, .art-3, .art-4 { display: none; }

/* ============================================================
   CATEGORIES
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.cat-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--hairline);
  background: var(--surface-soft);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.cat-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.cat-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.4s;
}
.cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.cat-card:hover img { transform: scale(1.05); }
.cat-ic {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(4px);
}
.cat-name {
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 2;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; color: #fff;
}

/* ============================================================
   PRODUCT CARDS / GRID
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.product-card, .pc-row {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.product-card:hover, .pc-row:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.pc-media, .pc-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface-soft);
}
.pc-media img, .pc-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s;
}
.product-card:hover .pc-media img,
.product-card:hover .pc-img img { transform: scale(1.04); }
.pc-img .ph, .gallery-ph, .ci-ph, .oc-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 40px; color: var(--muted);
  background: var(--surface-soft);
}
.pc-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: var(--clr-green); color: var(--on-primary);
}
.pc-body { padding: 16px; }
.pc-cat, .pi-cat {
  font-size: 12px; color: var(--clr-green);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
  margin-bottom: 6px;
}
.pc-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px; line-height: 1.3;
}
.pc-farmer, .pc-rating, .pi-rating {
  font-size: 13px; color: var(--body);
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.pc-price, .price-big, .price-range {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; color: var(--ink);
  margin-top: 10px;
}
.pc-actions, .oc-actions { display: flex; gap: 8px; margin-top: 12px; }
.pc-btn { flex: 1; }

/* ============================================================
   FILTERS BAR
   ============================================================ */
.filters-bar {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 16px 20px; margin-bottom: 24px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.filter-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.filter-group label { font-size: 12px; color: var(--muted); font-weight: 600; }
.filters-bar input, .filters-bar select {
  background: var(--bg); border: 1px solid var(--hairline);
  color: var(--txt); border-radius: 6px; padding: 10px 12px; font-size: 14px;
  transition: border-color 0.15s;
}
.filters-bar input:focus, .filters-bar select:focus {
  outline: none; border-color: var(--clr-green); box-shadow: 0 0 0 3px rgba(10,110,58,0.08);
}
.filters-bar select option { background: var(--bg); }

/* ============================================================
   FORMS — Modern glass inputs
   ============================================================ */
.form-page, .form-card {
  max-width: 560px; margin: 0 auto;
}
.form-card { padding: 32px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--body); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--hairline);
  color: var(--txt);
  border-radius: var(--radius);
  padding: 13px 16px; font-size: 14px;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--clr-green);
  box-shadow: var(--shadow-glow);
}
.form-group textarea { resize: vertical; min-height: 110px; height: auto; }
.form-group select option { background: var(--bg); }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }
.form-error {
  color: var(--clr-error); font-size: 13px; margin-top: 8px;
  padding: 10px 14px; border-radius: 6px;
  background: #fef2f2; border: 1px solid rgba(220,53,69,0.2);
}
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Radio group */
.radio-group, .radio-col { display: flex; gap: 12px; }
.radio-col { flex-direction: column; }
.radio-label {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 8px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--hairline);
  transition: border-color 0.15s, background 0.15s;
}
.radio-label:hover { border-color: var(--line-2); }
.radio-label input { accent-color: var(--clr-green); width: 18px; height: 18px; }
.radio-label.active, .radio-label:has(input:checked) {
  border-color: var(--clr-green); background: var(--clr-green-lt);
}

/* File upload zone */
.file-upload-zone {
  border: 2px dashed var(--hairline);
  border-radius: var(--radius);
  padding: 36px; text-align: center; cursor: pointer;
  background: var(--surface-soft);
  transition: border-color 0.15s, background 0.15s;
}
.file-upload-zone:hover { border-color: var(--clr-green); background: var(--clr-green-lt); }
.upload-icon { font-size: 36px; margin-bottom: 10px; }
.image-previews { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.image-previews img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--hairline); }

/* ============================================================
   AUTH PAGES — Modern glass card
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; position: relative;
  background: #ecfdf5;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-xl), 0 0 60px rgba(22,163,74,0.08);
  position: relative; z-index: 2;
}
.auth-logo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 20px; text-align: center;
}
.auth-logo .logo {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  justify-content: center;
}
.auth-logo .logo span { color: var(--ink); }
.auth-logo p { color: var(--body); font-size: 14px; }
.auth-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 4px;
  color: var(--txt);
}
.auth-footer { text-align: center; margin-top: 24px; color: var(--body); font-size: 14px; }
.auth-footer a { color: var(--clr-green); font-weight: 600; }
.auth-lang {
  position: absolute; top: 24px; right: 24px; z-index: 3;
}

/* ============================================================
   PROFILE
   ============================================================ */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.profile-card { padding: 28px; text-align: center; }
.profile-avatar {
  width: 80px; height: 80px; margin: 0 auto 16px;
  border-radius: 20px;
  background: var(--gradient-primary);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 800; color: #ffffff;
  box-shadow: var(--shadow-glow);
}
.profile-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--txt); }
.profile-role {
  display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; background: var(--clr-green-lt); color: var(--clr-green);
  border: 1px solid rgba(22,163,74,0.15);
}
.profile-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.profile-role {
  display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; background: var(--surface-soft); color: var(--body);
  border: 1px solid var(--hairline);
}
.profile-meta, .meta-row { margin-top: 18px; text-align: left; }
.meta-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.meta-row span:first-child { color: var(--muted); }
.edit-card { padding: 28px; }

/* ============================================================
   WALLET / BONUS
   ============================================================ */
.wallet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 30px; }
.wallet-card { padding: 24px; position: relative; overflow: hidden; }
.wallet-card.featured, .wallet-card.big {
  background: var(--surface-soft);
  border-color: var(--line-2);
}
.wc-ic { font-size: 24px; margin-bottom: 12px; }
.wc-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.wc-value, .balance, .points, .bonus-pts {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; color: var(--ink); margin-top: 4px;
}
.wallet-info { color: var(--body); font-size: 14px; }
.bonus-section { margin-top: 36px; }
.bonus-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
.bonus-table th, .bonus-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.bonus-table th { background: var(--surface-soft); color: var(--body); font-weight: 600; }
.bonus-table tr:last-child td { border-bottom: none; }
.bonus-rules { margin-top: 18px; color: var(--body); font-size: 14px; line-height: 1.9; }

/* ============================================================
   TARIFFS — pricing sub-system
   ============================================================ */
.tariffs-page { max-width: 1100px; margin: 0 auto; }
.tariffs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tariff-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.tariff-card.featured {
  background: var(--surface-soft);
  border-color: var(--line-2);
}
.tariff-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
  background: var(--gradient-primary); color: var(--on-primary);
  box-shadow: 0 4px 12px rgba(10,110,58,0.25);
}
.tariff-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.tariff-price, .tp-amount { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--ink); }
.tp-period { font-size: 14px; color: var(--muted); font-weight: 400; }
.tariff-feats { list-style: none; margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.tariff-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--body); }
.tariff-feats li::before { content: '✓'; color: var(--clr-green); font-weight: 700; }
.tf-key { color: var(--muted); }
.tf-val { color: var(--ink); font-weight: 600; }

/* ============================================================
   AI ASSISTANT — Modern chat
   ============================================================ */
.ai-wrap { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 200px); }
.ai-header { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); margin-bottom: 18px; }
.ai-orb, .ai-ava {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--gradient-primary); display: grid; place-items: center;
  font-size: 20px;
  box-shadow: var(--shadow-glow);
}
.ai-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--txt); }
.ai-status { font-size: 13px; color: var(--clr-green); display: flex; align-items: center; gap: 6px; }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clr-green); animation: pulse 2.5s ease-in-out infinite; }
.ai-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 8px 4px; }
.ai-msg { display: flex; gap: 12px; max-width: 78%; }
.ai-msg.bot { align-self: flex-start; }
.ai-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.ai-bubble { padding: 13px 17px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.ai-msg.bot .ai-bubble { background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.6); border-bottom-left-radius: 4px; box-shadow: var(--shadow); }
.ai-msg.user .ai-bubble { background: var(--gradient-primary); color: var(--on-primary); font-weight: 500; border-bottom-right-radius: 4px; }
.ai-suggest { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.ai-chip {
  padding: 9px 16px; border-radius: var(--radius-pill); font-size: 13px;
  background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.6); color: var(--body); cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}
.ai-chip:hover { border-color: var(--clr-green); color: var(--clr-green); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.ai-input-bar {
  display: flex; gap: 12px; padding: 12px 14px; margin-top: 16px;
  background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.ai-input-bar input { flex: 1; background: transparent; border: none; color: var(--txt); font-size: 14px; padding: 0 8px; }
.ai-input-bar input:focus { outline: none; }
.ai-send {
  width: 40px; height: 40px; border-radius: 12px; background: var(--gradient-primary);
  color: var(--on-primary); display: grid; place-items: center; font-size: 16px;
  box-shadow: var(--shadow-glow);
  transition: all 0.2s;
}
.ai-send:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(22,163,74,0.3); }
.ai-soon { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }
.ai-typing { display: flex; gap: 4px; padding: 8px 4px; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.product-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.product-gallery { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 1; background: var(--surface-soft); }
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin: 8px 0 12px; color: var(--ink); }
.farmer-block { display: flex; align-items: center; gap: 12px; padding: 16px; margin: 20px 0; background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--radius); }
.fb-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-primary); display: grid; place-items: center; color: #ffffff; font-weight: 600; font-size: 14px; }
.fb-name { font-weight: 600; }
.fb-label { font-size: 12px; color: var(--muted); }
.description { color: var(--body); line-height: 1.8; margin: 16px 0; }

/* ============================================================
   STATS / ADMIN — Modern glass cards
   ============================================================ */
.admin-page { max-width: 1100px; margin: 0 auto; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card {
  padding: 22px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: all 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 22px; background: var(--clr-green-lt); border: 1px solid rgba(22,163,74,0.15);
}
.stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--clr-green); }
.stat-lbl { color: var(--muted); font-size: 13px; font-weight: 500; }
.admin-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 2px solid var(--hairline); flex-wrap: wrap; }
.admin-tab { padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.admin-tab:hover { color: var(--txt); }
.admin-tab.active { color: var(--clr-green); border-bottom-color: var(--clr-green); font-weight: 700; }
.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  transition: all 0.2s; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.admin-row:hover { border-color: var(--clr-green); box-shadow: var(--shadow-lg); }
.admin-row.blocked { border-color: rgba(220,53,69,0.3); background: #fef2f2; }
.ar-main { flex: 1; min-width: 180px; }
.ar-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.ar-sub { color: var(--muted); font-size: 13px; }
.ar-reason {
  width: 100%; margin-top: 8px; padding: 8px 12px; border-radius: 6px;
  font-size: 13px; color: var(--clr-error);
  background: #fef2f2; border: 1px solid rgba(220,53,69,0.2);
}
.ar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.blocked-tag { padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: #fef2f2; color: var(--clr-error); border: 1px solid rgba(220,53,69,0.2); }

/* ============================================================
   BLOCKED SCREEN
   ============================================================ */
.blocked-screen {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.blocked-box {
  max-width: 500px; width: 100%; text-align: center;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 48px 40px;
}
.blocked-ic {
  width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 36px;
  background: #fef2f2; border: 1px solid rgba(220,53,69,0.2);
}
.blocked-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--clr-error); margin-bottom: 12px; }
.blocked-lead { color: var(--body); font-size: 15px; margin-bottom: 24px; line-height: 1.7; }
.blocked-letter, .bl-reason {
  text-align: left; background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 20px; margin-top: 18px;
}
.bl-head { font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.bl-reason-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 6px; }
.bl-reason { color: var(--txt); font-size: 14px; line-height: 1.6; }
.bl-foot { margin-top: 24px; color: var(--muted); font-size: 13px; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
}
.modal-box {
  max-width: 440px; width: 100%;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 32px;
}
.modal-ic { font-size: 32px; text-align: center; margin-bottom: 14px; }
.modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 8px; color: var(--ink); }
.modal-desc { color: var(--body); font-size: 14px; text-align: center; margin-bottom: 20px; }
.modal-textarea {
  width: 100%; min-height: 100px; resize: vertical;
  background: var(--surface-soft); border: 1px solid var(--hairline); color: var(--txt);
  border-radius: 6px; padding: 12px 16px; font-size: 14px;
}
.modal-textarea:focus { outline: none; border-color: var(--clr-green); }
.modal-actions { display: flex; gap: 12px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }

/* ============================================================
   STATES: empty / skeleton / spinner / toast / promo
   ============================================================ */
.empty-state { text-align: center; padding: 80px 20px; color: var(--muted); }
.empty-state .icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 { font-family: var(--font-display); font-size: 20px; color: var(--body); margin-bottom: 8px; font-weight: 600; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-soft) 25%, var(--bg) 50%, var(--surface-soft) 75%);
  background-size: 800px 100%; animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius);
}
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--hairline); border-top-color: var(--clr-green);
  animation: spin 0.8s linear infinite; margin: 40px auto;
}

#toast-container { position: fixed; top: 80px; right: 24px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  padding: 14px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--txt);
  box-shadow: var(--shadow-xl);
  animation: fadeUp 0.3s ease both;
  min-width: 260px;
}
.toast.ok { border-color: var(--clr-green); }
.toast.ok::before { content: '✓ '; color: var(--clr-green); font-weight: 700; }
.toast.error { border-color: var(--clr-error); }
.toast.error::before { content: '✕ '; color: var(--clr-error); font-weight: 700; }

.promo {
  display: flex; align-items: center; gap: 16px; padding: 22px 26px;
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.promo-ic { font-size: 32px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .profile-grid, .cart-layout, .product-detail-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 768px) {
  .app-main { padding: 80px 20px 60px; }
  .nav-inner { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 64px; left: 0; right: 0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(12px);
    padding: 14px; gap: 4px; border-bottom: 1px solid var(--hairline);
    z-index: 1500;
  }
  .nav-links.open .nav-link { padding: 12px 14px; font-size: 15px; }
  .nav-right { gap: 8px; }
  .uc-name { display: none; }
  .user-chip { padding: 6px; }
  .lang-select { max-width: 64px; padding: 6px 4px; font-size: 12px; }
  .hero-stats { gap: 24px; }
  .form-row { flex-direction: column; gap: 0; }
  .admin-tabs { flex-wrap: wrap; }
  .ai-modal { max-width: 100%; max-height: 88vh; }
}
@media (max-width: 420px) {
  .nav-logo .logo-text { font-size: 16px; }
  .user-chip .uc-name { display: none; }
}

/* ============================================================
   NAV EXTRAS
   ============================================================ */
.logo-leaf i { font-size: 16px; line-height: 1; }
.nav-link .nav-ic { font-size: 15px; opacity: 0.7; line-height: 1; }
.nav-ai-btn {
  border: 1px solid var(--hairline);
  background: var(--surface-soft);
}
.nav-ai-btn:hover { border-color: var(--line-2); }
.user-chip i { font-size: 14px; color: var(--ink); }
.uc-name {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink);
}

/* ============================================================
   AUTH: password toggle, divider, google button
   ============================================================ */
.pwd-wrap { position: relative; display: flex; align-items: center; }
.pwd-wrap input { width: 100%; padding-right: 44px; }
.pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: none; color: var(--body);
  transition: color 0.15s, background 0.15s;
}
.pwd-toggle:hover { color: var(--ink); background: var(--surface-soft); }
.pwd-toggle i { font-size: 16px; line-height: 1; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--muted); font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--hairline);
}

.btn-google {
  background: var(--bg); color: var(--ink); font-weight: 600;
  border: 1px solid var(--hairline);
}
.btn-google:hover { background: var(--surface-soft); border-color: var(--line-2); }
.btn-google i { font-size: 17px; color: #4285F4; }

/* ============================================================
   AI MODAL
   ============================================================ */
.ai-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
  opacity: 0; transition: opacity 0.15s;
}
.ai-modal-overlay.show { opacity: 1; }
.ai-modal {
  width: 100%; max-width: 440px;
  max-height: 82vh; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); overflow: hidden;
  transform: translateY(10px); transition: transform 0.18s;
}
.ai-modal-overlay.show .ai-modal { transform: translateY(0); }
.ai-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--hairline);
}
.ai-modal-titles { flex: 1; }
.ai-modal-titles h3 { font-family: var(--font-display); font-size: 16px; color: var(--ink); margin: 0; font-weight: 600; }
.ai-orb.sm { width: 36px; height: 36px; font-size: 16px; }
.ai-orb.sm i { font-size: 16px; }
.ai-modal-x {
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline); color: var(--body);
  display: grid; place-items: center;
}
.ai-modal-x:hover { color: var(--clr-error); border-color: rgba(220,53,69,0.3); }
.ai-modal .ai-chat { flex: 1; overflow-y: auto; padding: 16px; min-height: 220px; }
.ai-modal .ai-ava i, .ai-modal .ai-send i { font-size: 15px; }

.auth-lang .lang-select { max-width: 130px; text-align: left; }

/* ============================================================
   CURSOR POINTER
   ============================================================ */
a, button, .nav-link, .nav-logo, .cat-card, .cat-tab, .product-card,
.product-card.v2, .link-more, .ai-chip, .ai-fab-btn, .ai-modal-x,
.ai-fab-min, .promo button, .btn, [onclick], .how-card, .benefit-card,
.tip-card, .pc-btn, .ai-send, .lang-select, .burger-btn, .logout-btn,
.user-chip, .nav-right > *, .filter-group select { cursor: pointer !important; }

/* ============================================================
   MARKET PAGE
   ============================================================ */
.market-hero {
  position: relative;
  background: var(--gradient-hero);
  border: none;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.market-hero-bg { display: none; }
.market-hero-content {
  position: relative;
  display: flex; align-items: center; gap: 20px; z-index: 1;
}
.market-hero-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 24px; color: var(--on-primary);
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}
.market-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800; color: #ffffff; margin: 0 0 6px;
  line-height: 1.1;
}
.market-subtitle { color: rgba(255,255,255,0.8); font-size: 14px; margin: 0; }

/* Category tabs */
.cat-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.cat-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--body); font-size: 13px; font-weight: 500;
  transition: all 0.2s; white-space: nowrap;
  box-shadow: var(--shadow);
}
.cat-tab i { font-size: 13px; }
.cat-tab:hover { border-color: var(--clr-green); color: var(--clr-green); transform: translateY(-1px); }
.cat-tab.active {
  background: var(--gradient-primary); border-color: transparent;
  color: var(--on-primary); font-weight: 700;
  box-shadow: var(--shadow-glow);
}
.cat-tab.active i { color: var(--on-primary); }

/* Market toolbar */
.market-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 24px;
}
.market-search-wrap {
  position: relative; flex: 1; min-width: 220px;
}
.search-ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 14px; pointer-events: none;
}
.market-search {
  width: 100%; padding: 12px 16px 12px 44px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius);
  color: var(--txt); font-size: 14px;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}
.market-search:focus {
  outline: none; border-color: var(--clr-green);
  box-shadow: var(--shadow-glow);
}
.market-filters-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.price-inputs {
  display: flex; align-items: center; gap: 6px;
}
.price-inp {
  width: 100px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--hairline);
  border-radius: 6px; color: var(--txt); font-size: 13px;
  transition: border-color 0.15s;
}
.price-inp:focus { outline: none; border-color: var(--clr-green); }
.price-sep { color: var(--muted); font-size: 16px; }
.sort-select {
  padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--hairline);
  border-radius: 6px; color: var(--txt); font-size: 13px;
  transition: border-color 0.15s; min-width: 140px;
}
.sort-select:focus { outline: none; border-color: var(--clr-green); }
.sort-select option { background: var(--bg); }

/* Product grid v2 */
.products-grid.v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.product-card.v2 {
  position: relative;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow);
}
.product-card.v2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(22,163,74,0.12);
}
.pc-media.v2 {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.pc-img-el {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s;
}
.product-card.v2:hover .pc-img-el { transform: scale(1.04); }
.pc-img-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 48px; color: var(--muted);
}
.pc-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: var(--clr-warn); color: #5a3000;
}
.pc-discount {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  background: var(--clr-error); color: #fff;
}
.pc-cat-tag {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  color: var(--on-dark);
}
.pc-body { padding: 14px 16px 16px; }
.pc-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-rating {
  display: flex; gap: 2px; margin-bottom: 6px;
}
.star { font-size: 13px; color: var(--muted); }
.star.filled { color: var(--clr-warn); }
.star i { font-size: 13px; }
.pc-price-row { margin: 8px 0; }
.pc-price {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; color: var(--ink);
}
.pc-price small { font-size: 12px; font-weight: 400; color: var(--body); }
.pc-stock {
  font-size: 12px; color: #059669; font-weight: 500;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px;
}
.pc-stock i { font-size: 12px; }
.pc-stock-out { color: #9ca3af; font-style: italic; }
.pc-farmer {
  font-size: 12px; color: var(--body);
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 10px;
}
.pc-farmer i { color: var(--clr-green); font-size: 12px; }
.pc-actions { display: flex; gap: 8px; }
.pc-btn { flex: 1; font-size: 13px; padding: 8px 12px; }

/* ============================================================
   HOME V2
   ============================================================ */
.hero.v2 { position: relative; overflow: hidden; }
.hero-grid-dots { display: none; }
.hero-name { color: var(--ink); }
.hero-name-white { color: var(--on-dark); }
.hero-grad-green {
  background: linear-gradient(90deg, var(--clr-green) 0%, var(--clr-green-dk) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.hero-particles { display: none; }

/* Scroll hint arrow */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.scroll-arrow {
  width: 20px; height: 20px;
  border-right: 2px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
  transform: rotate(45deg);
  animation: scrollBounce 1.4s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,100% { transform: rotate(45deg) translateY(0); opacity: 0.4; }
  50% { transform: rotate(45deg) translateY(6px); opacity: 1; }
}

/* How it works */
.how-section { margin-top: 8px; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.how-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg); padding: 28px 20px;
  text-align: center; position: relative;
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.how-card:hover { border-color: var(--clr-green); transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.how-num {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gradient-primary); color: var(--on-primary);
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: var(--shadow-glow);
}
.how-ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--clr-green-lt); border: 1px solid rgba(22,163,74,0.15);
  display: grid; place-items: center; margin: 0 auto 14px;
  font-size: 24px; color: var(--clr-green);
}
.how-ic i { font-size: 22px; }
.how-label { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Benefits grid */
.benefits-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.benefit-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg); padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.benefit-card:hover { border-color: var(--clr-green); transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.benefit-card > i { font-size: 28px; color: var(--clr-green); margin-bottom: 14px; display: block; }
.benefit-card h4 { font-size: 15px; font-weight: 700; color: var(--txt); margin: 0 0 6px; }
.benefit-card p { font-size: 13px; color: var(--body); margin: 0; line-height: 1.5; }

/* Tips grid (farmer) */
.tips-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.tip-card {
  background: linear-gradient(135deg, rgba(22,163,74,0.08) 0%, rgba(34,197,94,0.04) 100%);
  border: 1px solid rgba(22,163,74,0.15);
  border-radius: var(--radius-lg); padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.tip-card:hover { border-color: var(--clr-green); transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.tip-card > i { font-size: 28px; color: var(--clr-green); margin-bottom: 14px; display: block; }
.tip-card h4 { font-size: 15px; font-weight: 700; color: var(--txt); margin: 0 0 6px; }
.tip-card p { font-size: 13px; color: var(--body); margin: 0; line-height: 1.5; }

/* Promo v2 */
.promo.v2 {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.promo-left { display: flex; align-items: center; gap: 16px; }

/* ============================================================
   FLOATING AI BUBBLE (FAB)
   ============================================================ */
#ai-fab-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.ai-fab-btn {
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--gradient-primary); border: none;
  box-shadow: var(--shadow-glow), 0 8px 24px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: all 0.2s;
}
.ai-fab-btn i { font-size: 22px; color: var(--on-primary); }
.ai-fab-label { font-size: 8px; font-weight: 800; color: var(--on-primary); letter-spacing: 0.5px; }
.ai-fab-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 36px rgba(22,163,74,0.35); }
.ai-fab-btn.active { transform: scale(0.95); }
.ai-fab-chat {
  width: 320px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); overflow: hidden;
  flex-direction: column;
}
.ai-fab-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--hairline);
  background: var(--surface-soft);
}
.ai-fab-head-left { display: flex; align-items: center; gap: 10px; }
.ai-fab-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.ai-fab-actions { display: flex; gap: 6px; }
.ai-fab-min {
  width: 28px; height: 28px; border-radius: 6px;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--body); display: grid; place-items: center; font-size: 14px;
}
.ai-fab-min:hover { color: var(--clr-green); border-color: var(--clr-green); }
.ai-fab-min i { font-size: 14px; }
.fab-suggest {
  padding: 8px 10px; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
}
.ai-chip.sm { padding: 5px 12px; font-size: 11px; }
.ai-input-bar.fab {
  padding: 10px 12px; border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.ai-send.sm { width: 30px; height: 30px; border-radius: 6px; }
.ai-send.sm i { font-size: 13px; }
.ai-ava.sm { width: 26px; height: 26px; font-size: 12px; border-radius: 6px; }

/* AI full page */
.ai-page-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.ai-page-hero {
  position: relative; background: var(--surface-soft);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 44px 40px; text-align: center; overflow: hidden; margin-bottom: 20px;
}
.ai-hero-glow { display: none; }
.ai-hero-orb {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gradient-primary); margin: 0 auto 20px;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(10,110,58,0.25);
  position: relative; z-index: 1;
}
.ai-hero-orb i { font-size: 26px; color: var(--on-primary); }
.ai-hero-title {
  font-family: var(--font-display); font-size: clamp(20px, 4vw, 28px);
  font-weight: 600; color: var(--ink); margin: 0 0 10px;
  position: relative; z-index: 1;
}
.ai-hero-sub {
  color: var(--body); font-size: 14px; margin: 0 0 16px;
  position: relative; z-index: 1;
}
.ai-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--bg); border: 1px solid var(--hairline);
  font-size: 12px; color: var(--body); font-weight: 500;
  position: relative; z-index: 1;
}
.ai-page-body {
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  height: calc(100vh - 340px); min-height: 380px;
}
.ai-page-body .ai-chat { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ai-page-body .ai-input-bar.page {
  padding: 14px 16px; border-top: 1px solid var(--hairline);
  background: var(--bg);
}

/* ============================================================
   HERO FULLSCREEN
   ============================================================ */
.hero.hero-fullscreen {
  border-radius: 0;
  min-height: 100vh;
  width: 100%;
  margin-left: calc(-48px);
  margin-right: calc(-48px);
  width: calc(100% + 96px);
  display: flex;
  align-items: center;
  padding: clamp(80px, 10vw, 140px) clamp(40px, 6vw, 90px) clamp(60px, 8vw, 100px);
  background: var(--surface-dark);
  border: none;
  margin-top: -80px;
  margin-bottom: 72px;
  position: relative;
  overflow: hidden;
}
.hero.hero-fullscreen .hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(6,77,40,0.85) 0%, rgba(10,110,58,0.6) 50%, rgba(5,150,105,0.3) 100%);
  z-index: 0;
}
.hero.hero-fullscreen::before { display: none; }
.hero.hero-fullscreen .hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.hero.hero-fullscreen .hero-title { color: var(--on-dark); }
.hero.hero-fullscreen .hero-sub { color: rgba(255,255,255,0.7) !important; }
.hero.hero-fullscreen .hero-stats .stat span { color: rgba(255,255,255,0.5) !important; }
.hero.hero-fullscreen .hero-stats .stat b { color: var(--on-dark); }
.hero.hero-fullscreen .hero-glow,
.hero.hero-fullscreen .hero-grid-dots,
.hero.hero-fullscreen .hero-art { display: none; }

/* ============================================================
   BUTTONS — enhanced hover
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: rgba(255,255,255,0.08);
  transition: opacity 0.15s;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.98) !important; }

.btn-primary { transition: transform 0.15s, background 0.15s !important; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98) translateY(0) !important; }

.btn-ghost, .btn-outline { transition: transform 0.15s, background 0.15s, border-color 0.15s !important; }
.btn-ghost:hover, .btn-outline:hover { transform: translateY(-1px); background: var(--surface-soft); }

/* Ripple */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
  animation: rippleAnim 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  0%   { transform: scale(0); opacity: 1; }
  60%  { transform: scale(4); opacity: 0.3; }
  100% { transform: scale(5); opacity: 0; }
}

.btn { overflow: hidden; position: relative; transition: transform 0.15s ease, border-color 0.15s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.btn-primary:hover:not(:disabled) { background: var(--clr-green-dk); filter: brightness(1.05); }
.btn-outline:hover:not(:disabled) { background: var(--surface-soft); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-soft); }

/* ============================================================
   PRODUCT-NEW PAGE
   ============================================================ */
.pn-page { max-width: 1000px; margin: 0 auto; padding-bottom: 60px; }

.pn-header {
  display: flex; align-items: flex-start; gap: 20px;
  margin-bottom: 32px;
}
.pn-back { flex-shrink: 0; margin-top: 4px; }
.pn-header-text h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600; margin: 0 0 6px;
  color: var(--ink);
}
.pn-header-text p { color: var(--muted); font-size: 14px; margin: 0; }

.pn-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .pn-layout { grid-template-columns: 1fr; }
  .pn-aside { order: -1; }
}

.pn-form-col { display: flex; flex-direction: column; gap: 16px; }

.pn-section-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px;
}
.pn-section-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.pn-input {
  width: 100%; padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--txt);
  font-size: 14px;
  transition: border-color 0.15s;
  outline: none;
}
.pn-input:focus { border-color: var(--clr-green); box-shadow: 0 0 0 3px rgba(10,110,58,0.1); }
.pn-input.error { border-color: var(--clr-error); }
.pn-textarea { min-height: 110px; resize: vertical; height: auto; }
.pn-hint { color: var(--muted); font-size: 12px; margin-top: 6px; display: block; }

.pn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .pn-row { grid-template-columns: 1fr; } }

.pn-input-with-icon { position: relative; }
.pn-input-with-icon .pn-input { padding-right: 56px; }
.pn-input-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; font-weight: 600;
}

/* Category chips */
.pn-cat-grid {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px;
}
.pn-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--body); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.pn-cat-chip:hover { border-color: var(--clr-green); color: var(--clr-green); }
.pn-cat-chip.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: var(--on-primary); font-weight: 600;
}
.pn-cat-chip.error-pulse { animation: errorPulse 0.4s ease; }
@keyframes errorPulse {
  0%,100% { border-color: var(--hairline); }
  50% { border-color: var(--clr-error); }
}

/* Dropzone */
.pn-dropzone {
  border: 2px dashed var(--hairline);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--surface-soft);
}
.pn-dropzone:hover, .pn-dropzone.dragover {
  border-color: var(--clr-green);
  background: var(--clr-green-lt);
}
.pn-upload-icon {
  font-size: 36px; color: var(--clr-green);
  opacity: 0.7; margin-bottom: 12px; display: block;
}
.pn-drop-title { font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.pn-drop-hint { color: var(--muted); font-size: 12px; margin: 0 0 14px; }

.pn-previews {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.pn-preview-item {
  width: 80px; height: 80px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--hairline);
}
.pn-preview-item img { width: 100%; height: 100%; object-fit: cover; }

/* Aside */
.pn-aside { display: flex; flex-direction: column; gap: 16px; }

.pn-tip-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 20px;
}
.pn-tip-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--clr-green-lt);
  display: grid; place-items: center;
  font-size: 18px; color: var(--clr-green);
  margin-bottom: 14px;
}
.pn-tip-card h4 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pn-tip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pn-tip-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--body);
}
.pn-tip-list li i { color: var(--clr-green); font-size: 12px; }

.pn-status-card {
  background: var(--clr-green-lt);
  border: 1px solid rgba(10,110,58,0.15);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 12px;
}
.pn-status-card > i {
  font-size: 18px; color: var(--clr-green);
  margin-top: 2px; flex-shrink: 0;
}
.pn-status-card b { font-size: 13px; color: var(--ink); }
.pn-status-card p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

.pn-submit {
  padding: 16px 24px; font-size: 15px; font-weight: 600;
  border-radius: var(--radius) !important;
}
.spin { animation: spinAnim 0.8s linear infinite; }
@keyframes spinAnim { to { transform: rotate(360deg); } }

/* ============================================================
   ORDERS PAGE
   ============================================================ */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
}

.order-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.oc-img {
  width: 88px;
  min-height: 110px;
  background: var(--surface-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.oc-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.oc-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 32px; min-height: 110px;
}

.oc-main {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-width: 0;
}
.oc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-id { font-size: 12px; color: var(--muted); font-weight: 500; }
.oc-meta {
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.oc-meta-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--muted); display: inline-block;
}
.oc-total {
  font-size: 16px; font-weight: 700; color: var(--ink);
}

/* status timeline */
.oc-timeline { display: flex; align-items: center; gap: 0; margin-top: 2px; }
.oct-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; position: relative;
}
.oct-step:not(:last-child)::after {
  content: ''; position: absolute; top: 10px; left: 50%; width: 100%; height: 2px;
  background: var(--hairline); z-index: 0;
}
.oct-step.done:not(:last-child)::after { background: var(--clr-green); }
.oct-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-soft); border: 2px solid var(--hairline);
  z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 9px;
}
.oct-step.done .oct-dot {
  background: var(--gradient-primary); border-color: var(--clr-green);
}
.oct-step.active .oct-dot {
  background: var(--bg); border-color: var(--clr-green);
}
.oct-step.cancelled .oct-dot {
  background: var(--clr-error); border-color: var(--clr-error);
}
.oct-label { font-size: 10px; color: var(--muted); margin-top: 4px; white-space: nowrap; text-align: center; }
.oct-step.done .oct-label, .oct-step.active .oct-label { color: var(--clr-green); font-weight: 600; }
.oct-step.cancelled .oct-label { color: var(--clr-error); }

/* actions column */
.oc-actions {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 8px; padding: 14px 14px 14px 8px;
  border-left: 1px solid var(--hairline); min-width: 110px;
}

/* badge tweaks */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
}
.badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge-created   { background: var(--surface-soft); color: var(--muted); }
.badge-paid      { background: #eff6ff; color: #3b82f6; }
.badge-ready     { background: #fffbeb; color: #f59e0b; }
.badge-completed { background: var(--clr-green-lt); color: var(--clr-green); }
.badge-cancelled { background: #fef2f2; color: var(--clr-error); }

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .cart-layout { grid-template-columns: 1fr; }
  .order-card { grid-template-columns: 64px 1fr; }
  .oc-actions { grid-column: 1 / -1; flex-direction: row; border-left: none; border-top: 1px solid var(--hairline); padding: 12px 16px; }
}

.cart-items { display: flex; flex-direction: column; gap: 10px; }

.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto auto auto;
  align-items: center;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.cart-item:hover { border-color: var(--line-2); }

.ci-img {
  width: 72px; height: 72px;
  background: var(--surface-soft);
  overflow: hidden; flex-shrink: 0;
}
.ci-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-ph { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 24px; }

.ci-info { padding: 0 14px; flex: 1; min-width: 0; }
.ci-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.ci-price { font-size: 12px; color: var(--muted); }

.ci-qty {
  display: flex; align-items: center; gap: 0;
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); overflow: hidden;
  margin: 0 10px;
}
.ci-qty button {
  width: 30px; height: 30px; background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.ci-qty button:hover { background: var(--surface-soft); }
.ci-qty span { min-width: 28px; text-align: center; font-weight: 600; font-size: 13px; color: var(--ink); }

.ci-sum {
  font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap; padding-right: 8px; min-width: 80px; text-align: right;
}

.ci-del {
  width: 36px; height: 72px; background: none; border: none;
  border-left: 1px solid var(--hairline); cursor: pointer;
  font-size: 14px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ci-del:hover { background: #fef2f2; color: var(--clr-error); }

/* cart summary card */
.cart-summary {
  position: sticky; top: 100px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.cart-summary h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--ink); }
.cs-divider { height: 1px; background: var(--hairline); }
.cs-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--body);
}
.cs-row b { color: var(--ink); font-weight: 600; }
.cs-total {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 12px 0 0; border-top: 1px solid var(--hairline);
}
.cs-total b { font-size: 18px; font-weight: 700; color: var(--ink); }
.cart-summary .btn-lg { padding: 14px; font-size: 14px; border-radius: var(--radius); }
.cart-summary .btn-ghost {
  font-size: 12px; color: var(--muted); text-align: center;
  background: none; border: none; cursor: pointer; padding: 0;
}
.cart-summary .btn-ghost:hover { color: var(--clr-error); }

/* page-head */
.page-head { margin-bottom: 24px; }
.page-title { font-size: 24px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.page-desc  { font-size: 14px; color: var(--muted); margin: 0; }

/* cart mobile */
@media (max-width: 600px) {
  .cart-item { grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; }
  .ci-img { width: 56px; height: 56px; grid-row: 1 / 3; }
  .ci-ph { width: 56px; height: 56px; }
  .ci-info { grid-column: 2; padding: 8px 10px 4px; }
  .ci-qty { grid-column: 2; margin: 0 10px 8px; width: fit-content; }
  .ci-sum { display: none; }
  .ci-del { grid-column: 3; grid-row: 1 / 3; height: 100%; }
}

/* ============================================================
   NAVBAR OVERFLOW FIX
   ============================================================ */
.nav-link { white-space: nowrap; flex-shrink: 0; }
.nav-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-inner { gap: 12px; }

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.scroll-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }
.scroll-reveal-left {
  opacity: 0; transform: translateX(-24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-reveal-left.revealed { opacity: 1; transform: translateX(0); }
.scroll-reveal-scale {
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.scroll-reveal-scale.revealed { opacity: 1; transform: scale(1); }

.delay-1 { transition-delay: 0.05s !important; }
.delay-2 { transition-delay: 0.1s !important; }
.delay-3 { transition-delay: 0.15s !important; }
.delay-4 { transition-delay: 0.2s !important; }
.delay-5 { transition-delay: 0.25s !important; }
.delay-6 { transition-delay: 0.3s !important; }

.how-card { transition: transform 0.2s ease, border-color 0.2s ease; }
.how-card:hover { transform: translateY(-3px); }

.benefit-card, .tip-card { transition: transform 0.2s ease, border-color 0.2s ease; }
.benefit-card:hover, .tip-card:hover { transform: translateY(-2px); }

/* ============================================================
   DELIVERY SECTION — courier search, cards, profile modal
   ============================================================ */

/* Delivery hero */
.del-hero {
  background: var(--gradient-hero);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  margin-bottom: 32px;
  color: var(--on-primary);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.del-hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.del-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  margin: 0 0 10px;
  position: relative;
}
.del-hero-sub {
  font-size: 16px;
  opacity: 0.85;
  margin: 0;
  position: relative;
}

/* Map container */
.del-map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.del-map {
  width: 100%;
  height: 400px;
  background: var(--surface-soft);
}
.del-map-controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
  z-index: 10;
}
.del-map-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--txt);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.del-map-input:focus {
  outline: none;
  border-color: var(--clr-green);
}
.del-radius-select {
  padding: 12px 14px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--txt);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 120px;
}
.del-search-btn {
  padding: 12px 24px;
  background: var(--gradient-primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: all 0.2s;
  white-space: nowrap;
}
.del-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(22,163,74,0.35);
}

/* Courier cards grid */
.del-couriers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

/* Courier card */
.del-courier-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.del-courier-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(22,163,74,0.12);
  border-color: var(--clr-green);
}

.del-cc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 0;
}
.del-cc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--gradient-primary);
  display: grid;
  place-items: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(10,110,58,0.2);
}
.del-cc-info { flex: 1; min-width: 0; }
.del-cc-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.del-cc-transport {
  font-size: 12px;
  color: var(--clr-green);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.del-cc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.del-cc-status.online {
  background: var(--clr-green-lt);
  color: var(--clr-green);
}
.del-cc-status.offline {
  background: var(--surface-soft);
  color: var(--muted);
}
.del-cc-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.del-cc-body {
  padding: 16px 20px;
}

/* Rating bar (0-10) */
.del-cc-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.del-rating-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.del-rating-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.del-rating-fill.low { background: #ef4444; }
.del-rating-fill.mid { background: #f59e0b; }
.del-rating-fill.high { background: var(--clr-green); }
.del-rating-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  min-width: 30px;
  text-align: right;
}
.del-rating-label {
  font-size: 11px;
  color: var(--muted);
}

/* Route badge */
.del-cc-route {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--body);
}
.del-cc-route .route-arrow {
  color: var(--clr-green);
  font-weight: 700;
}
.del-cc-route.anywhere {
  background: var(--clr-green-lt);
  color: var(--clr-green);
  font-weight: 600;
}

/* Stats row */
.del-cc-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
.del-cc-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.del-cc-footer {
  padding: 0 20px 16px;
  display: flex;
  gap: 8px;
}
.del-cc-footer .btn { flex: 1; font-size: 13px; padding: 10px; }

/* Profile modal */
.del-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
}
.del-profile-modal {
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-xl);
}
.del-profile-header {
  background: var(--gradient-primary);
  color: var(--on-primary);
  padding: 32px 28px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}
.del-profile-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.del-profile-close:hover { background: rgba(255,255,255,0.3); }
.del-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  font-size: 36px;
  margin-bottom: 16px;
}
.del-profile-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.del-profile-transport {
  font-size: 13px;
  opacity: 0.8;
}

.del-profile-body {
  padding: 24px 28px;
}
.del-profile-section {
  margin-bottom: 20px;
}
.del-profile-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.del-profile-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.del-profile-row:last-child { border-bottom: none; }
.del-profile-row .label { color: var(--muted); }
.del-profile-row .value { font-weight: 600; color: var(--ink); }

.del-profile-rating-big {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.del-profile-rating-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--clr-green);
  line-height: 1;
}
.del-profile-rating-bar {
  flex: 1;
  height: 10px;
  background: var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.del-profile-rating-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.8s ease;
}
.del-profile-rating-text {
  font-size: 13px;
  color: var(--muted);
}

.del-profile-footer {
  padding: 0 28px 24px;
}
.del-profile-footer .btn { width: 100%; }

/* Courier dashboard sidebar */
.del-dash {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  min-height: calc(100vh - 160px);
}
@media (max-width: 768px) {
  .del-dash { grid-template-columns: 1fr; }
  .del-map { height: 280px; }
  .del-couriers-grid { grid-template-columns: 1fr; }
}

.del-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.del-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.del-sidebar-item:hover {
  background: var(--surface-soft);
  color: var(--ink);
}
.del-sidebar-item.active {
  background: var(--clr-green-lt);
  color: var(--clr-green);
  font-weight: 600;
}
.del-sidebar-item .sidebar-emoji {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.del-dash-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Onboarding transport cards */
.del-onb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.del-onb-card {
  background: var(--bg-card);
  border: 2px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.del-onb-card:hover {
  border-color: var(--clr-green);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10,110,58,0.12);
}
.del-onb-card.selected {
  border-color: var(--clr-green);
  background: var(--clr-green-lt);
  box-shadow: 0 0 0 3px rgba(10,110,58,0.12);
}
.del-onb-card-emoji {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
}
.del-onb-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.del-onb-card-desc {
  font-size: 12px;
  color: var(--muted);
}

/* Onboarding route fields */
.del-onb-route {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.del-onb-route-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.del-onb-route-row .route-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  min-width: 60px;
}
.del-onb-route-row input {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--txt);
}
.del-onb-route-row input:focus {
  outline: none;
  border-color: var(--clr-green);
}
.del-onb-route-arrow {
  font-size: 20px;
  color: var(--clr-green);
}
.del-onb-anywhere {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  cursor: pointer;
}
.del-onb-anywhere input { accent-color: var(--clr-green); width: 18px; height: 18px; }
.del-onb-anywhere label { font-size: 14px; color: var(--ink); cursor: pointer; }

/* ─── Delivery Onboarding ─────────────────────────────────── */
.delivery-onboard {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 20px;
}
.onboard-header {
  text-align: center;
  margin-bottom: 32px;
}
.onboard-logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--clr-green);
  margin-bottom: 8px;
}
.onboard-subtitle {
  color: var(--muted);
  font-size: 15px;
}
.onboard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}
.op-step {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  transition: all 0.2s;
}
.op-step.active {
  background: var(--gradient-primary);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(10,110,58,0.2);
}
.op-line {
  width: 40px;
  height: 2px;
  background: var(--hairline);
}
.onboard-card {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-xl);
}
.ob-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.ob-desc {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 24px;
}
.ob-field {
  margin-bottom: 18px;
}
.ob-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  margin-bottom: 6px;
}
.ob-input, .ob-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--txt);
  transition: border-color 0.15s;
}
.ob-input:focus, .ob-select:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: 0 0 0 3px rgba(10,110,58,0.08);
}
.ob-textarea {
  min-height: 80px;
  resize: vertical;
}
.ob-range {
  width: 100%;
  accent-color: var(--clr-green);
}
.ob-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}
.ob-checkbox input {
  accent-color: var(--clr-green);
  width: 18px;
  height: 18px;
}
.ob-next {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  font-size: 15px;
}
.ob-nav {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.ob-nav .btn { flex: 1; }
.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

/* Truck type chips */
.truck-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.truck-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 14px;
  background: var(--bg);
  border: 2px solid var(--hairline);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.truck-chip:hover {
  border-color: var(--clr-green);
  transform: translateY(-2px);
}
.truck-chip.selected {
  border-color: var(--clr-green);
  background: var(--clr-green-lt);
  box-shadow: 0 0 0 3px rgba(10,110,58,0.12);
}
.tc-icon { font-size: 32px; }
.tc-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.tc-desc { font-size: 11px; color: var(--muted); }

/* Delivery sidebar (dashboard) */
.ds-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.ds-logo { font-size: 24px; }
.ds-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.ds-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
  transition: all 0.15s;
}
.ds-nav-item:hover { background: var(--surface-soft); color: var(--ink); }
.ds-nav-item.active {
  background: var(--clr-green-lt);
  color: var(--clr-green);
  font-weight: 600;
}
.ds-nav-icon { font-size: 18px; width: 24px; text-align: center; }
.ds-nav-label { font-size: 14px; }
.ds-footer {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  margin-top: auto;
}
.ds-courier-info { padding: 8px 14px; }
.ds-courier-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.ds-courier-status { font-size: 12px; }
.status-active { color: var(--clr-green); }
.status-pending { color: var(--clr-warn); }
.status-rejected { color: var(--clr-error); }

/* ============================================================
   ЙЎЛЧИ WOW REDESIGN — full overhaul, same green palette
   ============================================================ */

/* ── Delivery Layout ── */
.delivery-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  min-height: calc(100vh - 120px);
}
@media (max-width: 900px) {
  .delivery-layout { grid-template-columns: 1fr; }
}

/* ── Dashboard Layout ── */
.del-dash {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  min-height: calc(100vh - 120px);
}
@media (max-width: 900px) {
  .del-dash { grid-template-columns: 1fr; }
}

/* ── Sidebar — Glassmorphism + groups ── */
.del-sidebar {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 80px;
  height: fit-content;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s;
}

.ds-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.ds-logo { font-size: 28px; }
.ds-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.5px;
}

.ds-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.ds-nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.ds-nav-item:hover {
  color: var(--clr-green);
  transform: translateX(4px);
}
.ds-nav-item.active {
  color: var(--on-primary);
  font-weight: 700;
  box-shadow: var(--shadow-glow);
}
.ds-nav-item.active::before { opacity: 1; }
.ds-nav-item > * { position: relative; z-index: 1; }

.ds-nav-icon { font-size: 18px; width: 24px; text-align: center; }
.ds-nav-label { font-size: 14px; }

.ds-footer {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  margin-top: auto;
}
.ds-courier-info { padding: 8px 12px; }
.ds-courier-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--txt);
}
.ds-courier-status { font-size: 12px; font-weight: 600; }

/* ── Section Headers ── */
.section-home, .section-orders, .section-map,
.section-tariffs, .section-ai, .section-wallet,
.section-market, .section-profile {
  animation: fadeUp 0.4s ease both;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.5px;
}
.section-date {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

/* ── Stats Cards — Bento grid ── */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 768px) {
  .home-stats { grid-template-columns: repeat(2, 1fr); }
}
.hs-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hs-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.hs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.hs-card:hover::after {
  transform: scaleX(1);
}
.hs-card.clickable { cursor: pointer; }
.hs-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}
.hs-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--clr-green);
  margin-bottom: 4px;
}
.hs-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ── Pending Banner — Glassmorphism ── */
.pending-banner {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--clr-warn);
}
.pending-banner.rejection-banner {
  border-left-color: var(--clr-error);
}
.pb-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.pb-body { flex: 1; }
.pb-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--txt);
}
.pb-text {
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
}

/* Progress bar inside pending banner */
.pb-progress { margin-top: 14px; }
.pb-bar {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.pb-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 4px;
  transition: width 1s ease;
  animation: progressPulse 2s ease-in-out infinite;
}
@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.pb-bar-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ── Profile Completion — Expressive ── */
.profile-completion {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}
.pc-bar {
  height: 12px;
  background: var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.pc-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 6px;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.pc-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
  animation: shimmerBar 2s ease-in-out infinite;
}
@keyframes shimmerBar {
  0% { opacity: 0; transform: translateX(-20px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}
.pc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-green);
}

/* ── Home Section Blocks ── */
.home-section-block {
  margin-bottom: 24px;
}
.hsb-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 14px;
}

/* ── Notifications — Glass cards ── */
.notif-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius);
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}
.notif-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-lg);
}
.ni-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.ni-body { flex: 1; }
.ni-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  margin-bottom: 2px;
}
.ni-time {
  font-size: 12px;
  color: var(--muted);
}

/* ── Orders Tabs — Pill tabs ── */
.orders-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ot-tab {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow);
}
.ot-tab:hover {
  color: var(--clr-green);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.ot-tab.active {
  background: var(--gradient-primary);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

/* ── Order Cards — Modern glass ── */
.order-item {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}
.order-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── AI Chat Button — Floating action ── */
.ai-fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

/* ── Delivery Main Content ── */
.delivery-main {
  min-height: 400px;
}

/* ── Wallet Section ── */
.wallet-balance-card {
  background: var(--gradient-hero);
  border-radius: var(--radius-lg);
  padding: 32px;
  color: var(--on-primary);
  margin-bottom: 24px;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.wallet-balance-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.wb-label {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 8px;
}
.wb-amount {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
}
.wb-currency {
  font-size: 16px;
  opacity: 0.7;
  font-weight: 400;
}

/* ── Tariff Cards — Glass ── */
.tariff-card-del {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}
.tariff-card-del:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── Courier Profile Section ── */
.profile-section-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.profile-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 16px;
}

/* ── Form Elements in Delivery ── */
.del-input, .del-select, .del-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--txt);
  transition: all 0.2s;
  box-shadow: var(--shadow);
}
.del-input:focus, .del-select:focus, .del-textarea:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: var(--shadow-glow);
}

/* ── Map Controls — Glassmorphism ── */
.del-map-controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
  z-index: 10;
}
.del-map-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--txt);
  box-shadow: var(--shadow-lg);
}
.del-map-input:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: var(--shadow-glow);
}
.del-radius-select {
  padding: 12px 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--txt);
  box-shadow: var(--shadow-lg);
  min-width: 120px;
}

/* ── Courier Card in Search — Premium ── */
.del-courier-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.del-courier-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(22,163,74,0.12);
  border-color: var(--clr-green);
}
.del-cc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--gradient-primary);
  display: grid;
  place-items: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow);
}

/* ── Onboarding — Step cards ── */
.onboard-card {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-xl);
}
.truck-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 14px;
  background: rgba(255,255,255,0.8);
  border: 2px solid var(--hairline);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  text-align: center;
}
.truck-chip:hover {
  border-color: var(--clr-green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.truck-chip.selected {
  border-color: var(--clr-green);
  background: var(--clr-green-lt);
  box-shadow: var(--shadow-glow);
}
.tc-icon { font-size: 36px; }
.tc-label { font-size: 14px; font-weight: 700; color: var(--txt); }
.tc-desc { font-size: 11px; color: var(--muted); }

/* ── Micro-animations for all buttons ── */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

/* ── Scrollbar for delivery ── */
.delivery-main::-webkit-scrollbar { width: 6px; }
.delivery-main::-webkit-scrollbar-track { background: transparent; }
.delivery-main::-webkit-scrollbar-thumb { background: rgba(22,163,74,0.2); border-radius: 3px; }
.delivery-main::-webkit-scrollbar-thumb:hover { background: rgba(22,163,74,0.4); }

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-state .icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--body);
  margin-bottom: 8px;
  font-weight: 600;
}

/* ============================================================
   MOBILE RESPONSIVE — Full overhaul for phones
   Only applies when screen ≤ 768px. Desktop untouched.
   ============================================================ */

@media (max-width: 768px) {

  /* ── GLOBAL RESETS ── */
  body { font-size: 15px; line-height: 1.55; }

  .app-main {
    padding: 72px 16px 80px;
    max-width: 100%;
  }

  .section { margin-bottom: 48px; }
  .section-head { margin-bottom: 20px; }
  .section-head h2, .section h2 { font-size: 22px; }
  .page-title { font-size: 22px; font-weight: 700; }
  .page-desc { font-size: 13px; }

  /* ── NAVBAR ── */
  .navbar {
    top: 0; left: 0; right: 0;
    border-radius: 0;
    height: 52px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  }
  .nav-inner {
    padding: 0 14px;
    height: 52px;
    gap: 8px;
  }
  .nav-logo { gap: 6px; }
  .nav-logo .logo-leaf {
    width: 28px; height: 28px;
    border-radius: 8px; font-size: 14px;
  }
  .logo-text { font-size: 16px !important; }
  .nav-link { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
  .nav-link .nav-ic { font-size: 13px; }
  .nav-right { gap: 6px; }
  .user-chip {
    padding: 5px;
    border-radius: var(--radius-pill);
  }
  .user-chip .profile-avatar {
    width: 24px; height: 24px; font-size: 10px;
  }
  .lang-select {
    max-width: 56px; padding: 5px 4px; font-size: 11px;
    border-radius: 6px;
  }

  /* ── HERO ── */
  .hero {
    padding: 32px 20px;
    margin-bottom: 36px;
    border-radius: 16px;
  }
  .hero-title {
    font-size: 28px;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
  }
  .hero-sub {
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
  }
  .hero-stats { gap: 16px; margin-top: 28px; }
  .hero-stats .stat b, .hero-stats .stat .big { font-size: 24px; }
  .hero-stats .stat span { font-size: 12px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 12px 20px; font-size: 13px; }

  .hero.hero-fullscreen {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    min-height: 85vh;
    padding: 60px 20px 40px;
    margin-top: -52px;
    margin-bottom: 48px;
  }
  .hero.hero-fullscreen .hero-title { font-size: 26px; }
  .hero.hero-fullscreen .hero-sub { font-size: 13px; }

  /* ── MARKET HERO ── */
  .market-hero {
    padding: 24px 20px;
    border-radius: 16px;
    margin-bottom: 20px;
  }
  .market-hero-content { flex-direction: column; gap: 14px; align-items: flex-start; }
  .market-hero-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
  .market-title { font-size: 22px; }
  .market-subtitle { font-size: 13px; }

  /* ── CATEGORY TABS ── */
  .cat-tabs { gap: 6px; margin-bottom: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { padding: 8px 14px; font-size: 12px; white-space: nowrap; flex-shrink: 0; border-radius: 9999px; }
  .cat-tab i { font-size: 12px; }

  /* ── CATEGORY GRID ── */
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card { aspect-ratio: 1/1; border-radius: 12px; }
  .cat-ic { width: 30px; height: 30px; border-radius: 7px; font-size: 14px; top: 8px; left: 8px; }
  .cat-name { font-size: 13px; bottom: 10px; left: 10px; }

  /* ── MARKET TOOLBAR ── */
  .market-toolbar { flex-direction: column; gap: 10px; }
  .market-search-wrap { min-width: 100%; }
  .market-search { padding: 11px 14px 11px 40px; font-size: 14px; }
  .search-ic { left: 14px; font-size: 13px; }
  .market-filters-row { width: 100%; }
  .price-inputs { flex: 1; }
  .price-inp { width: 100%; flex: 1; padding: 9px 10px; font-size: 13px; }
  .sort-select { width: 100%; min-width: auto; padding: 9px 12px; font-size: 13px; }

  /* ── PRODUCTS GRID ── */
  .products-grid,
  .products-grid.v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .product-card, .product-card.v2 { border-radius: 14px; }
  .pc-media, .pc-media.v2, .pc-img { aspect-ratio: 1/1; }
  .pc-badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 10px; border-radius: 9999px; }
  .pc-discount { top: 8px; right: 8px; padding: 3px 8px; font-size: 11px; }
  .pc-cat-tag { bottom: 8px; left: 8px; padding: 3px 8px; font-size: 10px; }
  .pc-body { padding: 10px 12px 12px; }
  .pc-name { font-size: 13px; margin-bottom: 4px; line-height: 1.3; }
  .pc-rating { gap: 1px; margin-bottom: 4px; }
  .star, .star i { font-size: 11px; }
  .pc-price { font-size: 16px; }
  .pc-price small { font-size: 11px; }
  .pc-farmer { font-size: 11px; margin-bottom: 8px; }
  .pc-actions { gap: 6px; }
  .pc-btn { font-size: 12px; padding: 7px 10px; border-radius: 10px; }

  /* ── FILTERS BAR ── */
  .filters-bar {
    flex-direction: column;
    padding: 14px;
    gap: 12px;
    border-radius: 14px;
  }
  .filter-group { min-width: 100%; }

  /* ── PRODUCT DETAIL ── */
  .product-detail-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-gallery {
    border-radius: 16px;
    aspect-ratio: 4/3;
  }
  .product-info h1 { font-size: 24px; margin: 8px 0 10px; }
  .product-info { font-size: 14px; }
  .farmer-block { padding: 14px; gap: 10px; margin: 16px 0; border-radius: 14px; }
  .fb-ava { width: 36px; height: 36px; font-size: 13px; }

  /* ── PRODUCT NEW PAGE ── */
  .pn-page { padding-bottom: 40px; }
  .pn-header { gap: 14px; margin-bottom: 24px; }
  .pn-header-text h1 { font-size: 20px; }
  .pn-layout { grid-template-columns: 1fr; gap: 16px; }
  .pn-aside { order: -1; }
  .pn-section-card { padding: 18px; border-radius: 14px; }
  .pn-row { grid-template-columns: 1fr; gap: 12px; }
  .pn-input { padding: 11px 14px; font-size: 14px; border-radius: 10px; }
  .pn-dropzone { padding: 24px 16px; border-radius: 14px; }
  .pn-upload-icon { font-size: 28px; }
  .pn-cat-grid { gap: 8px; }
  .pn-cat-chip { padding: 7px 14px; font-size: 12px; border-radius: 9999px; }
  .pn-submit { padding: 14px 20px; font-size: 14px; border-radius: 14px !important; }

  /* ── BUTTONS ── */
  .btn {
    padding: 11px 18px;
    font-size: 13px;
    border-radius: 14px;
  }
  .btn-sm { padding: 8px 14px; font-size: 12px; }
  .btn-lg { padding: 14px 24px; font-size: 15px; }

  /* ── CARDS ── */
  .card, .form-card, .edit-card, .profile-card, .wallet-card,
  .stat-card, .order-card, .order-panel {
    border-radius: 16px;
  }
  .card { padding: 18px; }
  .card-title { font-size: 18px; margin-bottom: 14px; }

  /* ── FORMS ── */
  .form-page, .form-card { padding: 24px; }
  .form-group input, .form-group select, .form-group textarea {
    padding: 12px 14px; font-size: 14px; border-radius: 14px;
  }
  .form-row { flex-direction: column; gap: 12px; }

  /* ── AUTH PAGE ── */
  .auth-page { padding: 24px 16px; }
  .auth-card {
    padding: 28px 20px;
    border-radius: 20px;
    max-width: 100%;
  }
  .auth-title { font-size: 20px; }
  .auth-logo .logo { font-size: 22px; }
  .auth-lang { top: 16px; right: 16px; }
  .auth-lang .lang-select { max-width: 100px; font-size: 12px; }

  /* ── PROFILE ── */
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .profile-card {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .profile-avatar {
    width: 64px; height: 64px;
    border-radius: 16px; font-size: 24px;
  }
  .profile-name { font-size: 18px; }
  .meta-row { font-size: 13px; padding: 9px 0; }
  .edit-card { padding: 18px; border-radius: 16px; }

  /* ── WALLET ── */
  .wallet-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
  .wallet-card { padding: 16px; border-radius: 14px; }
  .wc-value, .balance, .points, .bonus-pts { font-size: 24px; }
  .wallet-balance-card { padding: 24px 20px; border-radius: 16px; }
  .wb-amount { font-size: 32px; }
  .bonus-table { font-size: 13px; border-radius: 14px; overflow: hidden; }
  .bonus-table th, .bonus-table td { padding: 10px 12px; font-size: 13px; }

  /* ── TARIFFS ── */
  .tariffs-grid { grid-template-columns: 1fr; gap: 14px; }
  .tariff-card { padding: 24px 20px; border-radius: 16px; }
  .tariff-name { font-size: 20px; }
  .tariff-price, .tp-amount { font-size: 32px; }
  .tariff-feats { gap: 10px; margin: 18px 0; }
  .tariff-feats li { font-size: 13px; gap: 8px; }

  /* ── AI CHAT ── */
  .ai-wrap { height: calc(100vh - 140px); max-width: 100%; }
  .ai-header { padding-bottom: 14px; margin-bottom: 14px; gap: 10px; }
  .ai-orb, .ai-ava { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .ai-title { font-size: 17px; }
  .ai-chat { gap: 12px; padding: 8px 2px; }
  .ai-msg { max-width: 88%; gap: 8px; }
  .ai-bubble { padding: 11px 14px; font-size: 13px; border-radius: 10px; }
  .ai-suggest { gap: 8px; margin: 12px 0; }
  .ai-chip { padding: 8px 14px; font-size: 12px; border-radius: 9999px; }
  .ai-input-bar { padding: 10px 12px; margin-top: 12px; border-radius: 14px; gap: 10px; }
  .ai-input-bar input { font-size: 14px; }
  .ai-send { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }

  /* AI page */
  .ai-page-wrap { max-width: 100%; }
  .ai-page-hero { padding: 28px 18px; border-radius: 14px; margin-bottom: 14px; }
  .ai-hero-orb { width: 52px; height: 52px; margin-bottom: 14px; }
  .ai-hero-orb i { font-size: 22px; }
  .ai-hero-title { font-size: 20px; }
  .ai-hero-sub { font-size: 13px; margin-bottom: 12px; }
  .ai-page-body { height: calc(100vh - 280px); min-height: 300px; border-radius: 14px; }
  .ai-page-body .ai-chat { padding: 14px; gap: 10px; }

  /* AI FAB */
  #ai-fab-container { bottom: 16px; right: 16px; }
  .ai-fab-btn { width: 50px; height: 50px; border-radius: 16px; }
  .ai-fab-btn i { font-size: 20px; }
  .ai-fab-chat { width: 100%; max-width: 320px; border-radius: 16px; }

  /* ── ORDERS (mobile) ── */
  .orders-list { max-width: 100%; gap: 10px; }
  .order-card {
    grid-template-columns: 1fr;
    border-radius: 14px;
    overflow: hidden;
  }
  .oc-img { display: none; }
  .oc-ph { display: none; }
  .oc-main { padding: 14px; gap: 8px; }
  .oc-top { gap: 6px; }
  .oc-name { font-size: 14px; white-space: normal; }
  .oc-meta { font-size: 12px; gap: 4px; }
  .oc-total { font-size: 15px; }
  .oc-actions {
    border-left: none;
    border-top: 1px solid var(--hairline);
    padding: 12px 14px;
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: auto;
    gap: 8px;
  }
  .oc-actions .btn { width: 100%; font-size: 13px; padding: 10px 14px; justify-content: center; }

  /* Status notes & delivery blocks on mobile */
  .order-card > .oc-main > div[style*="background:#"] {
    padding: 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    margin-top: 8px;
  }

  /* Order tabs */
  .orders-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .orders-tabs::-webkit-scrollbar { display: none; }
  .ot-tab { padding: 8px 16px; font-size: 12px; white-space: nowrap; flex-shrink: 0; border-radius: 9999px; }

  /* Order status timeline */
  .oc-timeline { gap: 0; }
  .oct-label { font-size: 9px; margin-top: 3px; }
  .oct-dot { width: 16px; height: 16px; }

  /* ── CART ── */
  .cart-layout { grid-template-columns: 1fr; gap: 16px; }
  .cart-summary {
    position: static;
    border-radius: 16px;
    padding: 18px;
  }
  .cart-items { gap: 8px; }
  .cart-item {
    grid-template-columns: 56px 1fr auto;
    grid-template-rows: auto auto;
    border-radius: 14px;
  }
  .ci-img { width: 56px; height: 56px; grid-row: 1 / 3; }
  .ci-ph { width: 56px; height: 56px; }
  .ci-info { grid-column: 2; padding: 8px 10px 4px; }
  .ci-name { font-size: 13px; }
  .ci-price { font-size: 11px; }
  .ci-qty { grid-column: 2; margin: 2px 10px 8px; }
  .ci-qty button { width: 28px; height: 28px; font-size: 15px; }
  .ci-qty span { font-size: 12px; min-width: 24px; }
  .ci-sum { display: none; }
  .ci-del {
    grid-column: 3; grid-row: 1 / 3;
    height: 100%;
    width: 32px;
    border-left: 1px solid var(--hairline);
  }
  .ci-del i { font-size: 13px; }

  /* ── ADMIN ── */
  .admin-page { max-width: 100%; }
  .admin-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .stat-card {
    padding: 16px;
    border-radius: 14px;
    gap: 10px;
  }
  .stat-ic { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
  .stat-num { font-size: 22px; }
  .stat-lbl { font-size: 12px; }

  .admin-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; border-bottom-width: 1px; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom-width: 2px;
    margin-bottom: -1px;
  }

  .admin-row {
    padding: 14px;
    border-radius: 14px;
    gap: 12px;
  }
  .ar-main { min-width: 0; }
  .ar-title { font-size: 13px; }
  .ar-sub { font-size: 12px; }
  .ar-actions { gap: 6px; }
  .ar-actions .btn { font-size: 11px; padding: 7px 10px; }

  /* ── DELIVERY / DRIVER ── */
  .del-hero {
    padding: 28px 20px;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  .del-hero-title { font-size: 24px; margin-bottom: 8px; }
  .del-hero-sub { font-size: 14px; }

  .del-map-wrap { border-radius: 16px; margin-bottom: 18px; }
  .del-map { height: 260px; }
  .del-map-controls { gap: 8px; padding: 0 12px 12px; left: 0; right: 0; flex-wrap: wrap; }
  .del-map-input { padding: 10px 14px; font-size: 13px; border-radius: 12px; min-width: 0; }
  .del-radius-select { padding: 10px 12px; font-size: 12px; border-radius: 12px; min-width: 0; }
  .del-search-btn { padding: 10px 18px; font-size: 13px; border-radius: 12px; }

  .del-couriers-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .del-courier-card { border-radius: 16px; }
  .del-cc-header { padding: 16px 16px 0; gap: 12px; }
  .del-cc-avatar { width: 48px; height: 48px; border-radius: 12px; font-size: 24px; }
  .del-cc-name { font-size: 15px; }
  .del-cc-body { padding: 14px 16px; }
  .del-cc-route { padding: 8px 12px; font-size: 12px; border-radius: 10px; margin-bottom: 10px; }
  .del-cc-stats { gap: 12px; font-size: 11px; margin-bottom: 12px; }
  .del-cc-footer { padding: 0 16px 14px; }
  .del-cc-footer .btn { font-size: 12px; padding: 9px 10px; }

  /* Delivery profile modal */
  .del-profile-overlay { padding: 12px; }
  .del-profile-modal { max-height: 90vh; border-radius: 20px; }
  .del-profile-header { padding: 24px 20px; border-radius: 20px 20px 0 0; }
  .del-profile-avatar { width: 60px; height: 60px; border-radius: 14px; font-size: 30px; margin-bottom: 12px; }
  .del-profile-name { font-size: 20px; }
  .del-profile-body { padding: 20px; }
  .del-profile-rating-big { padding: 14px; gap: 12px; }
  .del-profile-rating-num { font-size: 28px; }
  .del-profile-footer { padding: 0 20px 20px; }

  /* Delivery dashboard */
  .del-dash { grid-template-columns: 1fr; gap: 16px; min-height: auto; }
  .delivery-layout { grid-template-columns: 1fr; gap: 16px; }

  .del-sidebar {
    position: static;
    padding: 12px;
    border-radius: 16px;
    flex-direction: row;
    overflow-x: auto;
    gap: 2px;
    scrollbar-width: none;
  }
  .del-sidebar::-webkit-scrollbar { display: none; }
  .del-sidebar-item {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 12px;
  }

  .ds-brand { padding: 8px 10px 12px; border-bottom: 1px solid var(--hairline); }
  .ds-logo { font-size: 22px; }
  .ds-name { font-size: 16px; }
  .ds-nav { flex-direction: row; overflow-x: auto; gap: 2px; flex-wrap: nowrap; scrollbar-width: none; }
  .ds-nav::-webkit-scrollbar { display: none; }
  .ds-nav-item { padding: 9px 12px; font-size: 13px; white-space: nowrap; flex-shrink: 0; border-radius: 10px; gap: 8px; }
  .ds-nav-group-label { display: none; }
  .ds-footer { border-top: 1px solid var(--hairline); padding-top: 10px; }
  .ds-courier-info { padding: 6px 10px; }

  /* Delivery onboarding */
  .delivery-onboard { padding: 24px 16px; }
  .onboard-card { padding: 24px 18px; border-radius: 18px; }
  .onboard-progress { gap: 0; flex-wrap: wrap; justify-content: center; }
  .op-step { padding: 8px 14px; font-size: 12px; }
  .op-line { width: 24px; }
  .ob-title { font-size: 20px; }
  .ob-desc { font-size: 13px; margin-bottom: 20px; }
  .ob-field { margin-bottom: 14px; }
  .ob-label { font-size: 12px; }
  .ob-input, .ob-select { padding: 11px 14px; font-size: 14px; border-radius: 12px; }

  .del-onb-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .del-onb-card { padding: 18px 12px; border-radius: 16px; }
  .del-onb-card-emoji { font-size: 32px; margin-bottom: 8px; }
  .del-onb-card-title { font-size: 13px; }
  .del-onb-card-desc { font-size: 11px; }

  .truck-chips { grid-template-columns: 1fr 1fr; gap: 10px; }
  .truck-chip { padding: 16px 10px; border-radius: 14px; }
  .tc-icon { font-size: 28px; }
  .tc-label { font-size: 13px; }
  .tc-desc { font-size: 10px; }

  /* ── NOTIFICATIONS ── */
  .notif-item { padding: 14px; border-radius: 14px; gap: 12px; margin-bottom: 8px; }
  .ni-icon { font-size: 20px; }
  .ni-title { font-size: 13px; }
  .ni-time { font-size: 11px; }

  /* ── SECTION HEADERS (delivery dashboard) ── */
  .section-header { margin-bottom: 20px; gap: 8px; }
  .section-title { font-size: 22px; }
  .section-date { font-size: 13px; }

  /* ── HOME STATS (delivery) ── */
  .home-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .hs-card { padding: 16px 14px; border-radius: 16px; }
  .hs-icon { font-size: 24px; margin-bottom: 6px; }
  .hs-num { font-size: 22px; }
  .hs-label { font-size: 11px; }

  /* ── PENDING BANNER ── */
  .pending-banner { padding: 18px; border-radius: 16px; gap: 12px; border-left-width: 3px; }
  .pb-icon { font-size: 28px; }
  .pb-title { font-size: 15px; }
  .pb-text { font-size: 13px; }

  /* ── PROFILE COMPLETION ── */
  .profile-completion { padding: 16px 18px; border-radius: 16px; }
  .pc-bar { height: 10px; border-radius: 5px; }

  /* ── HOW IT WORKS ── */
  .how-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .how-card { padding: 18px 14px; border-radius: 14px; }
  .how-ic { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; margin-bottom: 10px; }
  .how-ic i { font-size: 18px; }
  .how-label { font-size: 12px; }
  .how-num { width: 24px; height: 24px; font-size: 11px; top: 10px; right: 10px; }

  /* ── BENEFITS / TIPS ── */
  .benefits-grid, .tips-grid { grid-template-columns: 1fr; gap: 10px; }
  .benefit-card, .tip-card { padding: 20px 18px; border-radius: 16px; }
  .benefit-card > i, .tip-card > i { font-size: 24px; margin-bottom: 12px; }
  .benefit-card h4, .tip-card h4 { font-size: 14px; margin-bottom: 4px; }
  .benefit-card p, .tip-card p { font-size: 12px; }

  /* ── PROMO ── */
  .promo { padding: 18px; border-radius: 14px; gap: 14px; flex-direction: column; align-items: flex-start; }
  .promo.v2 { flex-direction: column; align-items: flex-start; }
  .promo-ic { font-size: 28px; }

  /* ── MODALS ── */
  .modal-overlay { padding: 16px; }
  .modal-box { padding: 24px 20px; border-radius: 18px; max-width: 100%; }
  .modal-title { font-size: 18px; }
  .modal-desc { font-size: 13px; }
  .modal-actions { flex-direction: column; gap: 10px; }

  /* ── AI MODAL ── */
  .ai-modal-overlay { padding: 12px; }
  .ai-modal { border-radius: 18px; max-height: 85vh; }
  .ai-modal-head { padding: 12px 14px; }
  .ai-modal-titles h3 { font-size: 15px; }
  .ai-modal-x { width: 28px; height: 28px; border-radius: 6px; }
  .ai-modal .ai-chat { padding: 14px; }

  /* ── BLOCKED SCREEN ── */
  .blocked-box { padding: 32px 24px; border-radius: 20px; }
  .blocked-title { font-size: 22px; }
  .blocked-lead { font-size: 14px; }
  .blocked-ic { width: 64px; height: 64px; font-size: 28px; margin-bottom: 18px; }

  /* ── EMPTY STATE ── */
  .empty-state { padding: 48px 16px; }
  .empty-state .icon { font-size: 40px; }
  .empty-state h3 { font-size: 16px; }

  /* ── TOAST ── */
  #toast-container { top: 64px; right: 16px; left: 16px; }
  .toast {
    min-width: auto;
    padding: 12px 16px;
    font-size: 13px;
    border-radius: 14px;
    width: 100%;
  }

  /* ── RADIO GROUP ── */
  .radio-group { flex-direction: column; gap: 8px; }
  .radio-label { padding: 12px 14px; font-size: 13px; }

  /* ── FILE UPLOAD ── */
  .file-upload-zone { padding: 24px 16px; border-radius: 14px; }
  .upload-icon { font-size: 28px; }
  .image-previews img { width: 64px; height: 64px; border-radius: 8px; }

  /* ── SCROLL HINT ── */
  .hero-scroll-hint { bottom: 20px; }

  /* ── HIDE DESKTOP-ONLY ELEMENTS ON MOBILE ── */
  .hero-art, .hero-glow, .hero-particles, .hero-grid-dots { display: none !important; }
}

/* ── SMALL PHONES ── */
@media (max-width: 420px) {
  .app-main { padding: 68px 12px 72px; }

  .logo-text { font-size: 15px !important; }
  .nav-logo .logo-leaf { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }

  .hero { padding: 24px 16px; border-radius: 14px; }
  .hero-title { font-size: 24px; }
  .hero-sub { font-size: 13px; }
  .hero-stats { gap: 12px; }
  .hero-stats .stat b, .hero-stats .stat .big { font-size: 20px; }

  .products-grid, .products-grid.v2 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pc-body { padding: 8px 10px 10px; }
  .pc-name { font-size: 12px; }
  .pc-price { font-size: 14px; }
  .pc-btn { font-size: 11px; padding: 6px 8px; }

  .cat-grid { gap: 8px; }
  .cat-card { border-radius: 10px; }
  .cat-name { font-size: 12px; }

  .admin-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 14px 12px; }
  .stat-num { font-size: 20px; }

  .how-grid { grid-template-columns: 1fr; gap: 8px; }
  .wallet-grid { grid-template-columns: 1fr; }

  .ai-fab-btn { width: 46px; height: 46px; border-radius: 14px; }
  .ai-fab-btn i { font-size: 18px; }

  .auth-card { padding: 24px 16px; }

  .pn-section-card { padding: 16px; }

  .del-map { height: 220px; }

  .del-onb-grid { grid-template-columns: 1fr; }
  .truck-chips { grid-template-columns: 1fr; }

  /* ── ORDERS (small phone) ── */
  .order-card { border-radius: 12px; }
  .oc-main { padding: 12px; }
  .oc-name { font-size: 13px; }
  .oc-meta { font-size: 11px; }
  .oc-total { font-size: 14px; }
  .oc-actions { padding: 10px 12px; gap: 6px; }
  .oc-actions .btn { font-size: 12px; padding: 9px 12px; }
  .oc-timeline { overflow-x: auto; }
  .oct-label { font-size: 8px; }

  /* ── DELIVERY CHATS (small phone) ── */
  .section-chats .chat-item { padding: 10px; gap: 8px; }
  .section-chats .chat-item-avatar { width: 38px; height: 38px; font-size: 16px; }
  .section-chats .chat-item-name { font-size: 13px; }
  .section-chats .chat-item-type { display: none; }
  .section-chats .chat-item-order { font-size: 11px; }
  .section-chats .chat-item-preview { font-size: 11px; }
  .section-chats .chat-item-time { font-size: 10px; }

  /* ── DELIVERY WALLET (small phone) ── */
  .section-wallet .wc-balance { font-size: 22px; }
  .section-wallet .wallet-card { padding: 16px; }
}

/* ── DELIVERY CHATS (mobile 768px) ── */
@media (max-width: 768px) {
  .section-chats { padding: 0; }
  .section-chats .section-header { padding: 0 4px; }
  .section-chats .chat-list { gap: 4px; }
  .section-chats .chat-item { padding: 12px; border-radius: 14px; gap: 10px; }
  .section-chats .chat-item-avatar { width: 42px; height: 42px; font-size: 18px; }
  .section-chats .chat-item-name { font-size: 14px; }
  .section-chats .chat-item-type { font-size: 11px; padding: 2px 6px; }
  .section-chats .chat-item-order { font-size: 12px; }
  .section-chats .chat-item-preview { font-size: 12px; max-width: 60%; }

  /* ── DELIVERY WALLET (mobile) ── */
  .section-wallet .wallet-card { padding: 20px 16px; border-radius: 16px; }
  .section-wallet .wc-balance { font-size: 26px; }
  .section-wallet .wallet-history h3 { font-size: 15px; }
  .section-wallet .tx-item { padding: 12px; gap: 10px; }
  .section-wallet .tx-amount { font-size: 14px; }

  /* ── DELIVERY MARKET (mobile) ── */
  .section-market .products-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ─── Chat List ─────────────────────────────────────────────────────────── */

.chat-list { display: flex; flex-direction: column; gap: 8px; }

.chat-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; cursor: pointer;
  border-radius: 16px; transition: all .2s ease;
  background: var(--bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
}
.chat-item:hover {
  box-shadow: 0 4px 16px rgba(16,185,129,0.1), 0 0 0 1px rgba(16,185,129,0.08);
  transform: translateY(-1px);
}
.chat-item-unread {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  box-shadow: 0 2px 8px rgba(16,185,129,0.1), 0 0 0 1px rgba(16,185,129,0.12);
}

.chat-item-avatar {
  width: 50px; height: 50px; border-radius: 16px;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16,185,129,0.15);
}

.chat-item-body { flex: 1; min-width: 0; }

.chat-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.chat-item-name { font-weight: 700; font-size: 15px; color: #0f172a; }
.chat-item-type {
  font-size: 11px; color: #059669; background: rgba(16,185,129,0.08);
  padding: 3px 8px; border-radius: 8px; font-weight: 500;
}

.chat-item-order { font-size: 13px; color: #059669; font-weight: 500; margin-bottom: 4px; }

.chat-item-bottom { display: flex; align-items: center; justify-content: space-between; }
.chat-item-preview { font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.chat-item-preview-new { color: #111827; font-weight: 600; }
.chat-item-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-item-time { font-size: 12px; color: #9ca3af; }
.chat-item-badge {
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 22px; height: 22px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
  box-shadow: 0 2px 6px rgba(16,185,129,0.35);
}

/* ─── Chat Detail ───────────────────────────────────────────────────────── */

.chat-page { display: flex; flex-direction: column; height: calc(100vh - 60px); }

.chat-page-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  flex-shrink: 0; position: relative; z-index: 2;
}

.chat-header-info-content { display: flex; align-items: center; justify-content: space-between; flex: 1; }
.chat-header-name { font-weight: 700; font-size: 16px; color: #0f172a; }
.chat-header-type { font-size: 13px; color: #6b7280; }
.chat-header-actions { display: flex; gap: 8px; }

.chat-order-card {
  padding: 10px 16px;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  box-shadow: inset 0 -1px 0 rgba(16,185,129,0.1);
  flex-shrink: 0;
}
.chat-order-card-inner { display: flex; align-items: center; justify-content: space-between; }
.chat-order-label { font-size: 13px; font-weight: 600; color: #059669; }
.chat-order-id { font-size: 12px; color: #6b7280; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #f8fafc 0%, #f0fdf4 100%);
}

.chat-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: #9ca3af;
}
.chat-empty-icon {
  font-size: 36px; margin-bottom: 16px;
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(16,185,129,0.15);
}

/* ─── Message Bubbles ───────────────────────────────────────────────────── */

.msg-bubble {
  max-width: 75%; padding: 10px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.5; word-break: break-word;
}
.msg-own {
  align-self: flex-end;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}
.msg-other {
  align-self: flex-start; background: #fff; color: #111827;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.msg-blocked {
  align-self: center; background: #fef2f2; border: 1px solid #fecaca;
  max-width: 90%; text-align: center;
  box-shadow: 0 1px 4px rgba(220,38,38,0.08);
}
.msg-blocked-text { color: #dc2626; font-size: 13px; }
.msg-sender { font-size: 12px; font-weight: 600; color: #059669; margin-bottom: 4px; }
.msg-text { white-space: pre-wrap; }
.msg-time { font-size: 11px; opacity: 0.7; margin-top: 4px; text-align: right; }
.msg-own .msg-time { color: rgba(255,255,255,0.7); }
.msg-photo { max-width: 280px; border-radius: 12px; cursor: pointer; display: block; }
.msg-voice { display: flex; align-items: center; gap: 8px; }
.msg-location { font-weight: 500; }

/* ─── Chat Input Bar ────────────────────────────────────────────────────── */

.chat-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.chat-actions-left { flex-shrink: 0; }
.chat-action-btn {
  width: 38px; height: 38px; border-radius: 12px;
  border: none; background: #f0fdf4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #059669; transition: all .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.chat-action-btn:hover { background: #d1fae5; box-shadow: 0 2px 6px rgba(16,185,129,0.15); }

.chat-text-input {
  flex: 1; border: none; border-radius: 20px;
  padding: 10px 16px; font-size: 14px; outline: none;
  background: #f1f5f9; color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: background .15s;
}
.chat-text-input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(16,185,129,0.2), inset 0 1px 2px rgba(0,0,0,0.04); }

.chat-send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; transition: all .15s; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}
.chat-send-btn:hover {
  box-shadow: 0 4px 12px rgba(16,185,129,0.4);
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.pd-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .pd-layout { grid-template-columns: 1fr; }
  .pd-sidebar { order: -1; }
}

.pd-main { display: flex; flex-direction: column; gap: 20px; }

/* Photo block */
.pd-photo-block {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.pd-photo {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.pd-photo-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}
.pd-cat-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #059669;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Info block */
.pd-info-block {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.pd-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  line-height: 1.3;
}

.pd-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pd-price {
  font-size: 26px;
  font-weight: 800;
  color: #059669;
}
.pd-price small {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}
.pd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.pd-badge-green {
  background: rgba(16,185,129,0.1);
  color: #059669;
}

.pd-desc {
  margin-bottom: 20px;
}
.pd-desc-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
.pd-desc p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.pd-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
}
.pd-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0fdf4, #d1fae5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  font-size: 16px;
  flex-shrink: 0;
}
.pd-info-label {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 2px;
}
.pd-info-value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

/* Farmer card */
.pd-farmer-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border-radius: 14px;
  margin-top: 4px;
}
.pd-farmer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}
.pd-farmer-label {
  font-size: 12px;
  color: #9ca3af;
}
.pd-farmer-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.pd-farmer-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.pd-farmer-rating span {
  font-size: 13px;
  color: #f59e0b;
  font-weight: 600;
}

/* Order panel (sidebar) */
.pd-order-panel {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  position: sticky;
  top: 80px;
}
.pd-order-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.pd-order-row {
  margin-bottom: 16px;
}
.pd-order-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.pd-qty-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  background: #fafafa;
  transition: all 0.2s;
}
.pd-qty-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
  background: #fff;
}
.pd-radio-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  margin-bottom: 16px;
  border-top: 1px solid #f1f5f9;
}
.pd-order-total span {
  font-size: 14px;
  color: #6b7280;
}
.pd-order-total b {
  font-size: 22px;
  font-weight: 800;
  color: #059669;
}
.pd-btn-main {
  margin-bottom: 8px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
}
.pd-btn-cart {
  padding: 12px;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 768px) {
  .pd-layout { gap: 16px; padding: 0 4px; }
  .pd-photo { height: 260px; }
  .pd-photo-placeholder { height: 200px; font-size: 48px; }
  .pd-info-block { padding: 18px; border-radius: 14px; }
  .pd-title { font-size: 20px; }
  .pd-price { font-size: 22px; }
  .pd-order-panel { padding: 18px; border-radius: 14px; position: static; }
  .pd-order-total b { font-size: 18px; }
}
@media (max-width: 420px) {
  .pd-photo { height: 220px; }
  .pd-photo-placeholder { height: 160px; font-size: 40px; }
  .pd-title { font-size: 18px; }
  .pd-price { font-size: 20px; }
  .pd-farmer-card { padding: 12px; gap: 10px; }
  .pd-farmer-avatar { width: 40px; height: 40px; font-size: 16px; }
}