/* ============================================================
   home.css · FarmConnect Marketplace
   Unique "home-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- CSS Variables (agricultural palette) ----- */
:root {
  --home-primary: #2D7D3A;
  --home-primary-dark: #236B2E;
  --home-primary-hover: #1f5e28;
  --home-dark: #0A1F0E;
  --home-dark-forest: #0D2812;
  --home-dark-deep: #0A1A0E;
  --home-white: #FFFFFF;
  --home-light-bg: #F0F5F0;
  --home-off-white: #F5F9F2;
  --home-text-dark: #111827;
  --home-text-medium: #374151;
  --home-text-light: #6B7280;
  --home-border-light: #E5E7EB;
  --home-green-border: rgba(45, 125, 58, 0.25);
  --home-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
  --home-shadow-hover: 0 20px 40px rgba(45, 125, 58, 0.15);
  --home-radius: 20px;
  --home-radius-sm: 12px;
  --home-transition: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ----- Reset & base ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--home-white);
  color: var(--home-text-dark);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--home-transition);
}

/* ----- Utility / container overrides (Bootstrap grid friendly) ----- */
.container {
  max-width: 1280px;
}



/* Buttons */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: var(--home-transition);
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
}

.home-btn-primary {
  background: var(--home-primary);
  color: var(--home-white);
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.home-btn-primary:hover {
  background: var(--home-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: var(--home-white);
}



.home-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

/* ============================================================
   HERO
   ============================================================ */
.home-hero {
  background: linear-gradient(145deg, var(--home-dark) 0%, #0D2E14 100%);
  padding: 4rem 1.5rem 5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" opacity="0.06"><path d="M0 200 Q200 100 400 200 T800 200 T1200 200 L1200 400 L0 400 Z" fill="%232D7D3A"/><circle cx="200" cy="180" r="80" fill="%232D7D3A" opacity="0.2"/><circle cx="900" cy="280" r="120" fill="%232D7D3A" opacity="0.15"/></svg>') no-repeat center/cover;
  pointer-events: none;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.home-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.home-hero-title {
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--home-white);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.home-hero-sub {
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.5;
}

/* search box */
.home-search-wrapper {
  max-width: 820px;
  margin: 0 auto;
}

.home-search-box {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-radius: 80px;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(45, 125, 58, 0.2);
  transition: var(--home-transition);
}

.home-search-box:focus-within {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--home-primary);
}

.home-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 140px;
  background: transparent;
  padding: 0.2rem 0.2rem 0.2rem 0.6rem;
}

.home-search-icon {
  color: var(--home-primary);
  font-size: 1rem;
  opacity: 0.7;
}

.home-search-input {
  border: none;
  background: transparent;
  font-size: 1rem;
  padding: 0.6rem 0.2rem;
  width: 100%;
  font-weight: 400;
  color: var(--home-text-dark);
  outline: none;
  font-family: 'Inter', sans-serif;
}

.home-search-input::placeholder {
  color: var(--home-text-light);
  font-weight: 400;
  opacity: 0.7;
}

.home-search-select {
  position: relative;
}

.home-search-select-input {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 1.8rem 0.6rem 0.4rem;
  font-weight: 500;
  color: var(--home-text-dark);
  appearance: none;
  outline: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
}

.home-btn-search {
  padding: 0.7rem 2rem;
  font-size: 1rem;
  border-radius: 60px;
  background: var(--home-primary);
  color: var(--home-white);
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.home-btn-search:hover {
  background: var(--home-primary-dark);
  transform: scale(1.02);
}

/* ============================================================
   SECTIONS (white background)
   ============================================================ */
.home-section {
  padding: 4rem 0;
}

.home-section-white {
  background: var(--home-white);
}

.home-section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--home-text-dark);
  margin-bottom: 2.5rem;
  text-align: center;
  position: relative;
}

.home-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--home-primary);
  border-radius: 4px;
  margin: 0.5rem auto 0;
}

/* ----- Categories ----- */
.home-category-grid {
  margin-top: 0.5rem;
}

.home-category-card {
  background: var(--home-off-white);
  padding: 1.5rem 0.5rem;
  border-radius: var(--home-radius-sm);
  text-align: center;
  transition: var(--home-transition);
  cursor: default;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.home-category-card:hover {
  transform: translateY(-6px);
  border-color: var(--home-green-border);
  box-shadow: var(--home-shadow-hover);
  background: var(--home-white);
}

.home-cat-icon {
  font-size: 2.2rem;
  color: var(--home-primary);
  opacity: 0.9;
}

.home-category-card span {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--home-text-dark);
}

/* ----- Featured listings cards ----- */
.home-listing-card {
  background: var(--home-white);
  border-radius: var(--home-radius);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: var(--home-transition);
  border: 1px solid var(--home-border-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home-listing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--home-shadow-hover);
  border-color: rgba(45, 125, 58, 0.2);
}

.home-listing-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--home-light-bg);
  flex-shrink: 0;
}

.home-listing-body {
  padding: 1.2rem 1.2rem 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-listing-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: var(--home-text-dark);
}

.home-listing-seller {
  font-weight: 500;
  color: var(--home-text-medium);
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.home-trust-badge {
  color: var(--home-primary);
  margin-right: 0.2rem;
}

.home-listing-location {
  font-size: 0.85rem;
  color: var(--home-text-light);
  margin-bottom: 0.6rem;
}

.home-listing-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--home-border-light);
}

.home-listing-price {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--home-primary);
}

.home-listing-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  border-radius: 60px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.home-status-available {
  background: #DFF0E0;
  color: var(--home-primary-dark);
}

.home-status-low {
  background: #FEF3C7;
  color: #B45309;
}

.home-listing-rating {
  font-size: 0.8rem;
  color: #F59E0B;
  margin-top: 0.3rem;
  display: flex;
  gap: 0.1rem;
  align-items: center;
}

/* ----- How it works steps ----- */
.home-step-card {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--home-light-bg);
  border-radius: var(--home-radius);
  transition: var(--home-transition);
  height: 100%;
  
}

.home-step-card:hover {
  background: var(--home-white);
  box-shadow: var(--home-shadow-hover);
  transform: scale(1.01);
}

.home-step-icon {
  font-size: 2.8rem;
  color: var(--home-primary);
  margin-bottom: 0.75rem;
  display: inline-block;
}

.home-step-card h3 {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
  color: var(--home-text-dark);
}

.home-step-card p {
  color: var(--home-text-medium);
  font-size: 0.95rem;
  max-width: 260px;
  margin: 0 auto;
}

/* ============================================================
   CTA (dark green)
   ============================================================ */
.home-cta {
  background: linear-gradient(135deg, var(--home-dark) 0%, #0D2E14 100%);
  padding: 4.5rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.home-cta-content h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--home-white);
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.home-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.home-btn-cta {
  padding: 0.8rem 2.4rem;
  font-size: 1.1rem;
  font-weight: 700;
}

/* ============================================================
   FOOTER (dark)
   ============================================================ */
.home-footer {
  background: var(--home-dark-forest);
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.home-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.home-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.home-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.home-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: var(--home-transition);
}

.home-social-icons a:hover {
  color: var(--home-white);
  transform: translateY(-2px);
}

.home-footer h5 {
  color: var(--home-white);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.home-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-footer-links li {
  margin-bottom: 0.4rem;
}

.home-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: var(--home-transition);
}

.home-footer-links a:hover {
  color: var(--home-white);
  padding-left: 4px;
}

.home-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.home-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--home-white);
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.home-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.home-footer-input:focus {
  border-color: var(--home-primary);
}

.home-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE (mobile-first)
   ============================================================ */

/* tablets & small laptops */
/* @media screen and (max-width: 992px) {
  .home-nav-links {
    gap: 0.4rem 1.2rem;
  }
  .home-nav-link {
    font-size: 0.85rem;
  }
  .home-search-box {
    border-radius: 40px;
    padding: 0.5rem;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
  }
  .home-search-field {
    flex: 1 1 100%;
    width: 100%;
    border-bottom: 1px solid var(--home-border-light);
    padding: 0.2rem 0.6rem;
  }
  .home-search-field:last-of-type {
    border-bottom: none;
  }
  .home-btn-search {
    width: 100%;
    border-radius: 60px;
    margin-top: 0.2rem;
  }
  .home-hero-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
  }
} */

/* mobile */
/* @media screen and (max-width: 768px) {
  .home-hero {
    padding: 3rem 1rem 3.5rem;
  }
  .home-section {
    padding: 2.5rem 0;
  }
  .home-listing-img {
    height: 160px;
  }
  .home-cta {
    padding: 3rem 1rem;
  }
  .home-footer .row > div {
    margin-bottom: 1.5rem;
  }
  .home-footer-bottom {
    margin-top: 1.5rem;
  }
  .home-category-card {
    padding: 1rem 0.2rem;
  }
  .home-cat-icon {
    font-size: 1.8rem;
  }
} */

/* small phones */
/* @media screen and (max-width: 400px) {
  .home-logo {
    font-size: 1.3rem;
  }
  .home-hero-title {
    font-size: 1.6rem;
  }
  .home-btn-cta {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
  }
  .home-search-box {
    padding: 0.4rem;
  }
} */

/* ============================================================
   SCROLL ANIMATION (fade-up) – triggered by JS
   ============================================================ */
/* .home-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.home-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
} */


/* ============================================================
   marketplace.css · FarmConnect Marketplace
   Unique "marketplace-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR (inherits from main but scoped) ----- */
.marketplace-navbar {
  background: #0A1F0E;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.marketplace-nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.marketplace-logo-wrapper {
  display: flex;
  align-items: center;
}

.marketplace-logo {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.marketplace-logo-icon {
  color: #2D7D3A;
  font-size: 1.8rem;
}

.marketplace-nav-links {
  display: flex;
  align-items: center;
  gap: 0.8rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.marketplace-nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: 0.25s ease;
}

.marketplace-nav-link:hover,
.marketplace-nav-link.active {
  color: #FFFFFF;
  border-bottom-color: #2D7D3A;
}

.marketplace-nav-cta-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Buttons */
.marketplace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.marketplace-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.marketplace-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.marketplace-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

.marketplace-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.marketplace-btn-outline {
  border: 1.5px solid #2D7D3A;
  color: #2D7D3A;
  background: transparent;
}

.marketplace-btn-outline:hover {
  background: #2D7D3A;
  color: #FFFFFF;
}

.marketplace-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.marketplace-btn-view {
  width: 100%;
  margin-top: 0.5rem;
}

/* Hamburger */
.marketplace-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}

.marketplace-hamburger-bar {
  width: 26px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
  transform-origin: center;
}

.marketplace-hamburger.active .marketplace-hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.marketplace-hamburger.active .marketplace-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.marketplace-hamburger.active .marketplace-hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- PAGE HEADER (dark green) ----- */
.marketplace-page-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.marketplace-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.marketplace-page-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.marketplace-page-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.marketplace-page-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ----- SEARCH & FILTER SECTION (white) ----- */
.marketplace-search-section {
  background: #FFFFFF;
  padding: 2.5rem 0;
  border-bottom: 1px solid #E5E7EB;
}

.marketplace-search-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.marketplace-search-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #F0F5F0;
  padding: 0.75rem;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.marketplace-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 180px;
  background: #FFFFFF;
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  transition: 0.3s ease;
}

.marketplace-search-field:focus-within {
  border-color: #2D7D3A;
  box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.marketplace-search-icon {
  color: #6B7280;
  font-size: 0.9rem;
}

.marketplace-search-input {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 0;
  width: 100%;
  font-weight: 400;
  color: #111827;
  outline: none;
  font-family: 'Inter', sans-serif;
}

.marketplace-search-input::placeholder {
  color: #9CA3AF;
}

.marketplace-search-select {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 1.8rem 0.6rem 0.2rem;
  font-weight: 400;
  color: #111827;
  appearance: none;
  outline: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
}

.marketplace-btn-filter {
  padding: 0.6rem 2rem;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ----- GRID SECTION ----- */
.marketplace-grid-section {
  background: #FFFFFF;
  padding: 3rem 0 4rem;
}

.marketplace-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.marketplace-grid-header-featured {
  display: flex;
  justify-content: center;
  align-items: center;
}

.marketplace-grid-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.marketplace-grid-count {
  font-size: 0.95rem;
  color: #6B7280;
  font-weight: 500;
}

/* ----- CARDS ----- */
.marketplace-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #E5E7EB;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.marketplace-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(45, 125, 58, 0.15);
  border-color: rgba(45, 125, 58, 0.2);
}

.marketplace-card-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #F0F5F0;
  flex-shrink: 0;
}

.marketplace-card-body {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.marketplace-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.2rem;
}

.marketplace-card-seller {
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.marketplace-trust-badge {
  color: #2D7D3A;
  margin-right: 0.2rem;
}

.marketplace-card-location {
  font-size: 0.85rem;
  color: #6B7280;
  margin-bottom: 0.6rem;
}

.marketplace-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid #E5E7EB;
}

.marketplace-card-price {
  font-weight: 700;
  font-size: 1.2rem;
  color: #2D7D3A;
}

.marketplace-card-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  border-radius: 60px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.marketplace-status-available {
  background: #DFF0E0;
  color: #236B2E;
}

.marketplace-status-low {
  background: #FEF3C7;
  color: #B45309;
}

.marketplace-status-sold {
  background: #FEE2E2;
  color: #DC2626;
}

.marketplace-card-rating {
  font-size: 0.8rem;
  color: #F59E0B;
  margin-top: 0.3rem;
  display: flex;
  gap: 0.1rem;
  align-items: center;
}

/* ----- EMPTY STATE ----- */
.marketplace-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  display: none;
}

.marketplace-empty-state.show {
  display: block;
}

.marketplace-empty-icon {
  font-size: 3rem;
  color: #6B7280;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.marketplace-empty-state h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.marketplace-empty-state p {
  color: #6B7280;
}

/* ----- FOOTER ----- */
.marketplace-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.marketplace-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.marketplace-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.marketplace-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.marketplace-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.marketplace-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.marketplace-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.marketplace-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.marketplace-footer-links li {
  margin-bottom: 0.4rem;
}

.marketplace-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
}

.marketplace-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.marketplace-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.marketplace-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.marketplace-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.marketplace-footer-input:focus {
  border-color: #2D7D3A;
}

.marketplace-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 992px) {
  .marketplace-search-box {
    flex-direction: column;
  }
  .marketplace-search-field {
    flex: 1 1 100%;
  }
  .marketplace-btn-filter {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .marketplace-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    align-items: center;
  }
  .marketplace-nav-links.open {
    display: flex;
    max-height: 500px;
    opacity: 1;
    padding: 1.2rem 0 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.6rem;
  }
  .marketplace-nav-links li {
    width: 100%;
    text-align: center;
  }
  .marketplace-nav-links .marketplace-nav-link {
    width: 100%;
    text-align: center;
    display: block;
  }
  .marketplace-nav-cta-wrapper {
    width: 100%;
    justify-content: center;
  }
  .marketplace-hamburger {
    display: flex;
  }
  .marketplace-page-header {
    padding: 3rem 1rem;
  }
  .marketplace-grid-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .marketplace-card-img {
    height: 160px;
  }
  .marketplace-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .marketplace-logo {
    font-size: 1.3rem;
  }
  .marketplace-page-title {
    font-size: 1.6rem;
  }
  .marketplace-search-box {
    padding: 0.5rem;
  }
}


/* ============================================================
   product-detail.css · FarmConnect Product Detail
   Unique "detail-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR ----- */
.detail-navbar {
  background: #0A1F0E;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.detail-logo-wrapper {
  display: flex;
  align-items: center;
}

.detail-logo {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.detail-logo-icon {
  color: #2D7D3A;
  font-size: 1.8rem;
}

.detail-nav-links {
  display: flex;
  align-items: center;
  gap: 0.8rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.detail-nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: 0.25s ease;
  text-decoration: none;
}

.detail-nav-link:hover,
.detail-nav-link.active {
  color: #FFFFFF;
  border-bottom-color: #2D7D3A;
}

.detail-nav-cta-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Buttons */
.detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.detail-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.detail-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.detail-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

.detail-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.detail-btn-outline {
  border: 1.5px solid #2D7D3A;
  color: #2D7D3A;
  background: transparent;
}

.detail-btn-outline:hover {
  background: #2D7D3A;
  color: #FFFFFF;
}

.detail-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.detail-btn-lg {
  padding: 0.8rem 2rem;
  font-size: 1.05rem;
}

.detail-btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.detail-btn-whatsapp:hover {
  background: #1DA851;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  color: #FFFFFF;
}

.detail-btn-report {
  color: #6B7280;
  background: transparent;
  border: 1px solid #E5E7EB;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding: 0.4rem 1.2rem;
}

.detail-btn-report:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #DC2626;
}

/* Hamburger */
.detail-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}

.detail-hamburger-bar {
  width: 26px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
  transform-origin: center;
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- PRODUCT HEADER (dark green) ----- */
.detail-product-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.detail-product-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.detail-product-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.detail-product-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.detail-product-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
}

/* ----- PRODUCT DETAIL SECTION (white) ----- */
.detail-product-section {
  background: #FFFFFF;
  padding: 3rem 0;
}

.detail-product-image-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.detail-product-image {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-color: #F0F5F0;
}

.detail-product-info {
  padding: 0.5rem 0;
}

.detail-product-name {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.detail-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.detail-product-seller {
  font-weight: 600;
  color: #374151;
  font-size: 1rem;
}

.detail-trust-badge {
  color: #2D7D3A;
  margin-right: 0.3rem;
}

.detail-product-location {
  color: #6B7280;
  font-size: 0.95rem;
}

.detail-product-price-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.detail-product-price {
  font-size: 2rem;
  font-weight: 800;
  color: #2D7D3A;
}

.detail-product-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-radius: 60px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-status-available {
  background: #DFF0E0;
  color: #236B2E;
}

.detail-status-low {
  background: #FEF3C7;
  color: #B45309;
}

.detail-status-sold {
  background: #FEE2E2;
  color: #DC2626;
}

.detail-product-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #F59E0B;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.detail-product-rating span {
  color: #6B7280;
  font-weight: 500;
}

.detail-product-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1.5rem;
}

.detail-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* ----- SELLER SECTION ----- */
.detail-seller-section {
  background: #FFFFFF;
  padding: 2rem 0 3rem;
  border-top: 1px solid #F0F5F0;
}

.detail-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
}

.detail-seller-card {
  background: #F7FAF7;
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid #E5E7EB;
}

.detail-seller-profile {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.detail-seller-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid #2D7D3A;
  flex-shrink: 0;
}

.detail-seller-info {
  flex: 1;
  min-width: 200px;
}

.detail-seller-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.2rem;
}

.detail-verified-badge {
  color: #2D7D3A;
  font-size: 1.1rem;
  margin-left: 0.3rem;
}

.detail-seller-location,
.detail-seller-experience {
  color: #6B7280;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.detail-seller-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #F59E0B;
  font-size: 0.9rem;
  margin: 0.5rem 0 0.75rem;
}

.detail-seller-rating span {
  color: #6B7280;
  font-weight: 500;
}

/* ----- REVIEWS SECTION ----- */
.detail-reviews-section {
  background: #FFFFFF;
  padding: 2rem 0 3rem;
  border-top: 1px solid #F0F5F0;
}

.detail-reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.detail-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.detail-review-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: #F7FAF7;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}

.detail-review-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.detail-review-content {
  flex: 1;
}

.detail-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.detail-review-name {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  margin: 0;
}

.detail-review-stars {
  color: #F59E0B;
  font-size: 0.85rem;
}

.detail-review-text {
  color: #374151;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

.detail-review-date {
  font-size: 0.8rem;
  color: #9CA3AF;
}

/* ----- FOOTER ----- */
.detail-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
}

.detail-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.detail-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.detail-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.detail-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.detail-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.detail-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-footer-links li {
  margin-bottom: 0.4rem;
}

.detail-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
  text-decoration: none;
}

.detail-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.detail-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.detail-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.detail-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.detail-footer-input:focus {
  border-color: #2D7D3A;
}

.detail-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ----- MODAL ----- */
.detail-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.detail-modal-overlay.active {
  display: flex;
}

.detail-modal {
  background: #FFFFFF;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: detailModalIn 0.3s ease;
}

@keyframes detailModalIn {
  from {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem 0.5rem;
  border-bottom: 1px solid #E5E7EB;
}

.detail-modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-modal-header h3 i {
  color: #EF4444;
}

.detail-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #6B7280;
  cursor: pointer;
  transition: 0.3s ease;
  line-height: 1;
}

.detail-modal-close:hover {
  color: #111827;
  transform: rotate(90deg);
}

.detail-modal-body {
  padding: 1.5rem;
}

.detail-form-group {
  margin-bottom: 1.25rem;
}

.detail-form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 0.3rem;
}

.detail-form-input,
.detail-form-textarea {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  transition: 0.3s ease;
  background: #FFFFFF;
  color: #111827;
}

.detail-form-input:focus,
.detail-form-textarea:focus {
  outline: none;
  border-color: #2D7D3A;
  box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.detail-form-input-readonly {
  background: #F7FAF7;
  color: #6B7280;
  cursor: not-allowed;
}

.detail-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.detail-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #E5E7EB;
  justify-content: flex-end;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 992px) {
  .detail-product-image {
    height: 300px;
  }
  .detail-product-actions {
    flex-direction: column;
  }
  .detail-product-actions .detail-btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .detail-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    align-items: center;
  }
  .detail-nav-links.open {
    display: flex;
    max-height: 500px;
    opacity: 1;
    padding: 1.2rem 0 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.6rem;
  }
  .detail-nav-links li {
    width: 100%;
    text-align: center;
  }
  .detail-nav-links .detail-nav-link {
    width: 100%;
    text-align: center;
    display: block;
  }
  .detail-nav-cta-wrapper {
    width: 100%;
    justify-content: center;
  }
  .detail-hamburger {
    display: flex;
  }

  .detail-product-header {
    padding: 2rem 1rem;
  }
  .detail-product-image {
    height: 250px;
  }
  .detail-product-price {
    font-size: 1.6rem;
  }
  .detail-seller-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .detail-seller-avatar {
    width: 80px;
    height: 80px;
  }
  .detail-review-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .detail-review-header {
    justify-content: center;
  }
  .detail-modal {
    margin: 1rem;
    max-height: 95vh;
  }
  .detail-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .detail-logo {
    font-size: 1.3rem;
  }
  .detail-product-title {
    font-size: 1.6rem;
  }
  .detail-product-image {
    height: 200px;
  }
  .detail-modal-footer {
    flex-direction: column;
  }
  .detail-modal-footer .detail-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   ADDITIONS FOR PRODUCT DETAIL PAGE
   ============================================================ */

/* ----- Category & Date Added ----- */
.detail-product-category-date {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #6B7280;
}

.detail-product-category i,
.detail-product-date i {
    margin-right: 0.3rem;
    color: #2D7D3A;
}

/* ----- Rating with Verified Badge ----- */
.detail-product-rating-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.detail-product-rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #F59E0B;
    font-size: 0.95rem;
}

.detail-product-rating span {
    color: #6B7280;
    font-weight: 500;
}

.detail-verified-farmer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #236B2E;
    background: #DFF0E0;
    padding: 0.2rem 0.7rem;
    border-radius: 60px;
}

.detail-verified-farmer-badge i {
    font-size: 0.7rem;
}

/* ----- Product Specs Cards ----- */
.detail-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.detail-spec-card {
    background: #F7FAF7;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}

.detail-spec-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-spec-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

/* ----- Seller Card Fix ----- */
.detail-seller-card {
    background: #F7FAF7;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #E5E7EB;
    max-width: 800px;
    margin: 0 auto;
}

.detail-seller-verified-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.detail-verified-badge-icon {
    color: #2D7D3A;
    font-size: 1rem;
}

.detail-verified-badge-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #236B2E;
}

.detail-seller-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.detail-btn-call-farmer {
    background: #2D7D3A;
    color: #FFFFFF;
}

.detail-btn-call-farmer:hover {
    background: #236B2E;
    color: #FFFFFF;
}

/* ----- Similar Products ----- */
.detail-similar-section {
    background: #FFFFFF;
    padding: 2rem 0 3rem;
    border-top: 1px solid #F0F5F0;
}

.detail-similar-grid {
    margin-top: 0.5rem;
}

.detail-similar-card {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.detail-similar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45, 125, 58, 0.08);
    border-color: rgba(45, 125, 58, 0.2);
}

.detail-similar-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #F0F5F0;
    flex-shrink: 0;
}

.detail-similar-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.detail-similar-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.2rem;
}

.detail-similar-farmer {
    font-size: 0.8rem;
    color: #6B7280;
    margin: 0 0 0.2rem;
}

.detail-similar-location {
    font-size: 0.75rem;
    color: #6B7280;
    margin: 0 0 0.4rem;
}

.detail-similar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.detail-similar-price {
    font-weight: 700;
    font-size: 1rem;
    color: #2D7D3A;
}

.detail-similar-status {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 60px;
    text-transform: uppercase;
}

.detail-similar-rating {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #F59E0B;
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

.detail-similar-rating span {
    color: #6B7280;
    font-weight: 500;
}

.detail-similar-category {
    font-size: 0.7rem;
    color: #6B7280;
    margin-bottom: 0.5rem;
}

.detail-similar-category i {
    color: #2D7D3A;
    margin-right: 0.2rem;
}

.detail-btn-view-similar {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

/* ----- CTA Section ----- */
.detail-cta-section {
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
    padding: 4rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-cta-wrapper {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.detail-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.detail-cta-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.detail-btn-cta {
    padding: 0.8rem 2.5rem;
    font-size: 1.05rem;
    gap: 0.75rem;
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(45, 125, 58, 0.25);
    transition: all 0.3s ease;
}

.detail-btn-cta:hover {
    background: #236B2E;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

.detail-btn-cta i:last-child {
    transition: transform 0.3s ease;
}

.detail-btn-cta:hover i:last-child {
    transform: translateX(6px);
}

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Product specs - single column on mobile */
    .detail-product-specs {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .detail-spec-card {
        padding: 0.4rem 0.7rem;
    }

    .detail-spec-value {
        font-size: 0.85rem;
    }

    /* Similar products - 2 columns on tablet */
    .detail-similar-image {
        height: 130px;
    }

    .detail-similar-name {
        font-size: 0.85rem;
    }

    /* CTA section */
    .detail-cta-section {
        padding: 3rem 1rem;
    }

    .detail-cta-title {
        font-size: 1.6rem;
    }

    .detail-cta-subtitle {
        font-size: 0.95rem;
    }

    .detail-btn-cta {
        padding: 0.7rem 2rem;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }

    /* Seller card - full width on mobile */
    .detail-seller-card {
        padding: 1.25rem;
        max-width: 100%;
    }

    .detail-seller-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .detail-seller-avatar {
        width: 80px;
        height: 80px;
    }

    .detail-seller-actions {
        justify-content: center;
    }

    /* Rating wrapper */
    .detail-product-rating-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
}

@media screen and (max-width: 480px) {
    /* Product specs - single column on small phones */
    .detail-product-specs {
        grid-template-columns: 1fr 1fr;
    }

    /* Similar products - 1 column on small phones */
    .detail-similar-image {
        height: 150px;
    }

    .detail-cta-section {
        padding: 2rem 0.75rem;
    }

    .detail-cta-title {
        font-size: 1.3rem;
    }

    .detail-cta-subtitle {
        font-size: 0.85rem;
    }

    .detail-btn-cta {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }

    /* Category and date */
    .detail-product-category-date {
        font-size: 0.8rem;
        gap: 0.5rem;
    }

    /* Seller card */
    .detail-seller-card {
        padding: 1rem;
    }

    .detail-seller-name {
        font-size: 1.1rem;
    }

    .detail-seller-avatar {
        width: 70px;
        height: 70px;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .detail-similar-image {
        height: 140px;
    }
}

/* Fix farmer rating alignment on mobile */
@media screen and (max-width: 768px) {
    .detail-seller-rating {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        color: #F59E0B;
        font-size: 0.9rem;
        margin: 0.5rem 0 0.75rem;
    }
}

/* ============================================================
   FARMER CARD - PORTRAIT STYLE
   ============================================================ */

/* Farmer section - more spacing */
.detail-seller-section {
    background: #FFFFFF;
    padding: 3rem 0 4rem;
    border-top: 1px solid #F0F5F0;
}

.detail-section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Farmer card - portrait layout */
.detail-seller-card {
    background: #F7FAF7;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    border: 1px solid #E5E7EB;
    max-width: 600px;
    margin: 0 auto;
}

.detail-seller-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

/* Bigger avatar */
.detail-seller-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 4px solid #2D7D3A;
    flex-shrink: 0;
}

.detail-seller-info {
    flex: 1;
    width: 100%;
}

.detail-seller-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.2rem;
}

.detail-seller-verified-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.detail-verified-badge-icon {
    color: #2D7D3A;
    font-size: 1rem;
}

.detail-verified-badge-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #236B2E;
}

.detail-seller-location,
.detail-seller-experience {
    color: #6B7280;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.detail-seller-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: #F59E0B;
    font-size: 0.9rem;
    margin: 0.5rem 0 0.75rem;
}

.detail-seller-rating span {
    color: #6B7280;
    font-weight: 500;
}

.detail-seller-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.detail-btn-call-farmer {
    background: #2D7D3A;
    color: #FFFFFF;
}

.detail-btn-call-farmer:hover {
    background: #236B2E;
    color: #FFFFFF;
}

/* ============================================================
   RESPONSIVE - FARMER CARD
   ============================================================ */

@media screen and (max-width: 768px) {
    .detail-seller-section {
        padding: 2rem 0 3rem;
    }

    .detail-section-title {
        margin-bottom: 1.5rem;
    }

    .detail-seller-card {
        padding: 1.75rem 1.25rem;
        max-width: 100%;
        margin: 0 0.5rem;
    }

    .detail-seller-avatar {
        width: 100px;
        height: 100px;
    }

    .detail-seller-name {
        font-size: 1.2rem;
    }

    .detail-seller-profile {
        gap: 1rem;
    }

    .detail-seller-actions {
        flex-direction: column;
        width: 100%;
    }

    .detail-seller-actions .detail-btn {
        width: 100%;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .detail-seller-section {
        padding: 1.5rem 0 2.5rem;
    }

    .detail-seller-card {
        padding: 1.25rem 0.75rem;
        margin: 0 0.25rem;
    }

    .detail-seller-avatar {
        width: 80px;
        height: 80px;
        border-width: 3px;
    }

    .detail-seller-name {
        font-size: 1.1rem;
    }

    .detail-seller-location,
    .detail-seller-experience {
        font-size: 0.85rem;
    }

    .detail-seller-rating {
        font-size: 0.85rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .detail-seller-card {
        max-width: 500px;
        padding: 2rem 1.5rem;
    }

    .detail-seller-avatar {
        width: 110px;
        height: 110px;
    }
}

.detail-seller-card {
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
    .detail-seller-card {
        margin-top: 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    .detail-seller-card {
        margin-top: 0.85rem;
    }
}

/* ============================================================
   CONTACT MODAL - LOGIN REQUIRED
   ============================================================ */

.detail-contact-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.detail-contact-modal-overlay.active {
    display: flex;
}

.detail-contact-modal {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: contactModalIn 0.3s ease;
    position: relative;
}

@keyframes contactModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.detail-contact-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #6B7280;
    cursor: pointer;
    transition: 0.3s ease;
    line-height: 1;
}

.detail-contact-modal-close:hover {
    color: #111827;
    transform: rotate(90deg);
}

.detail-contact-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.detail-contact-modal-icon i {
    font-size: 2rem;
    color: #F59E0B;
}

.detail-contact-modal h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.detail-contact-modal p {
    font-size: 0.95rem;
    color: #6B7280;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.detail-contact-modal-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.detail-contact-modal-buttons .detail-btn {
    min-width: 120px;
    justify-content: center;
    padding: 0.6rem 2rem;
}

.detail-contact-modal-note {
    font-size: 0.8rem !important;
    color: #9CA3AF !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* Dark mode support */
.admin-dark-mode .detail-contact-modal {
    background: #0D2812;
}

.admin-dark-mode .detail-contact-modal h3 {
    color: #F8F9FA;
}

.admin-dark-mode .detail-contact-modal p {
    color: #9CA3AF;
}

.admin-dark-mode .detail-contact-modal-close {
    color: #9CA3AF;
}

.admin-dark-mode .detail-contact-modal-close:hover {
    color: #F8F9FA;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .detail-contact-modal {
        padding: 1.5rem;
        margin: 1rem;
    }

    .detail-contact-modal-buttons .detail-btn {
        min-width: 100px;
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }

    .detail-contact-modal-icon {
        width: 50px;
        height: 50px;
    }

    .detail-contact-modal-icon i {
        font-size: 1.5rem;
    }

    .detail-contact-modal h3 {
        font-size: 1.1rem;
    }
}

/* ============================================================
   REVIEW MODAL
   ============================================================ */

.detail-review-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.detail-review-modal-overlay.active {
    display: flex;
}

.detail-review-modal {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: reviewModalIn 0.3s ease;
}

@keyframes reviewModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.detail-review-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #E5E7EB;
}

.detail-review-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.detail-review-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #6B7280;
    cursor: pointer;
    transition: 0.3s ease;
    line-height: 1;
}

.detail-review-modal-close:hover {
    color: #111827;
    transform: rotate(90deg);
}

.detail-review-modal-body {
    padding: 1.5rem;
}

.detail-review-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #E5E7EB;
    justify-content: flex-end;
}

/* Star Rating */
.detail-star-rating {
    display: flex;
    gap: 0.3rem;
    font-size: 1.8rem;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.detail-star-rating i {
    color: #D1D5DB;
    transition: color 0.2s ease;
}

.detail-star-rating i.active {
    color: #F59E0B;
}

.detail-star-rating i:hover {
    color: #F59E0B;
}

.detail-rating-text {
    font-size: 0.85rem;
    color: #6B7280;
}

/* Dark mode */
.admin-dark-mode .detail-review-modal {
    background: #0D2812;
}

.admin-dark-mode .detail-review-modal-header h3 {
    color: #F8F9FA;
}

.admin-dark-mode .detail-review-modal-header {
    border-bottom-color: #1A3A22;
}

.admin-dark-mode .detail-review-modal-footer {
    border-top-color: #1A3A22;
}

.admin-dark-mode .detail-star-rating i {
    color: #374151;
}

.admin-dark-mode .detail-star-rating i.active {
    color: #F59E0B;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .detail-review-modal {
        margin: 0.5rem;
    }

    .detail-star-rating {
        font-size: 1.5rem;
    }

    .detail-review-modal-footer {
        flex-direction: column;
    }

    .detail-review-modal-footer .detail-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   farmers.css · FarmConnect Farmers Page
   Unique "farmers-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR ----- */
.farmers-navbar {
  background: #0A1F0E;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.farmers-nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.farmers-logo-wrapper {
  display: flex;
  align-items: center;
}

.farmers-logo {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.farmers-logo-icon {
  color: #2D7D3A;
  font-size: 1.8rem;
}

.farmers-nav-links {
  display: flex;
  align-items: center;
  gap: 0.8rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.farmers-nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: 0.25s ease;
  text-decoration: none;
}

.farmers-nav-link:hover,
.farmers-nav-link.active {
  color: #FFFFFF;
  border-bottom-color: #2D7D3A;
}

.farmers-nav-cta-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Buttons */
.farmers-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.farmers-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.farmers-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.farmers-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

.farmers-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.farmers-btn-outline {
  border: 1.5px solid #2D7D3A;
  color: #2D7D3A;
  background: transparent;
}

.farmers-btn-outline:hover {
  background: #2D7D3A;
  color: #FFFFFF;
}

.farmers-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.farmers-btn-view {
  width: 100%;
  margin-top: 0.5rem;
}

.farmers-btn-filter {
  padding: 0.6rem 2rem;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Hamburger */
.farmers-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}

.farmers-hamburger-bar {
  width: 26px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
  transform-origin: center;
}

.farmers-hamburger.active .farmers-hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.farmers-hamburger.active .farmers-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.farmers-hamburger.active .farmers-hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- PAGE HEADER (dark green) ----- */
.farmers-page-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.farmers-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.farmers-page-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.farmers-page-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.farmers-page-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ----- SEARCH & FILTER SECTION (white) ----- */
.farmers-search-section {
  background: #FFFFFF;
  padding: 2.5rem 0;
  border-bottom: 1px solid #E5E7EB;
}

.farmers-search-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.farmers-search-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #F0F5F0;
  padding: 0.75rem;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.farmers-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 160px;
  background: #FFFFFF;
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  transition: 0.3s ease;
}

.farmers-search-field:focus-within {
  border-color: #2D7D3A;
  box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.farmers-search-checkbox {
  flex: 0 1 auto;
  background: transparent;
  border: none;
  padding: 0.2rem 0.4rem;
}

.farmers-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}

.farmers-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2D7D3A;
  cursor: pointer;
}

.farmers-search-icon {
  color: #6B7280;
  font-size: 0.9rem;
}

.farmers-search-input {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 0;
  width: 100%;
  font-weight: 400;
  color: #111827;
  outline: none;
  font-family: 'Inter', sans-serif;
}

.farmers-search-input::placeholder {
  color: #9CA3AF;
}

.farmers-search-select {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 1.8rem 0.6rem 0.2rem;
  font-weight: 400;
  color: #111827;
  appearance: none;
  outline: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
}

/* ----- GRID SECTION ----- */
.farmers-grid-section {
  background: #FFFFFF;
  padding: 3rem 0 4rem;
}

.farmers-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.farmers-grid-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.farmers-grid-count {
  font-size: 0.95rem;
  color: #6B7280;
  font-weight: 500;
}

/* ----- CARDS ----- */
.farmers-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #E5E7EB;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.farmers-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(45, 125, 58, 0.15);
  border-color: rgba(45, 125, 58, 0.2);
}

.farmers-card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #F0F5F0;
  flex-shrink: 0;
}

.farmers-card-body {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.farmers-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.farmers-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.farmers-verified-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 60px;
  background: #DFF0E0;
  color: #236B2E;
  white-space: nowrap;
}

.farmers-verified-badge i {
  margin-right: 0.2rem;
}

.farmers-unverified-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 60px;
  background: #FEF3C7;
  color: #B45309;
  white-space: nowrap;
}

.farmers-unverified-badge i {
  margin-right: 0.2rem;
}

.farmers-card-specialization {
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.farmers-card-specialization i {
  color: #2D7D3A;
  margin-right: 0.3rem;
  width: 1rem;
}

.farmers-card-location {
  font-size: 0.85rem;
  color: #6B7280;
  margin-bottom: 0.2rem;
}

.farmers-card-location i {
  margin-right: 0.3rem;
}

.farmers-card-experience {
  font-size: 0.85rem;
  color: #6B7280;
  margin-bottom: 0.6rem;
}

.farmers-card-experience i {
  margin-right: 0.3rem;
}

.farmers-card-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #F59E0B;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.farmers-card-rating span {
  color: #6B7280;
  font-weight: 500;
}

/* ----- EMPTY STATE ----- */
.farmers-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  display: none;
}

.farmers-empty-state.show {
  display: block;
}

.farmers-empty-icon {
  font-size: 3rem;
  color: #6B7280;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.farmers-empty-state h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.farmers-empty-state p {
  color: #6B7280;
}

/* ----- FOOTER ----- */
.farmers-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.farmers-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
}

.farmers-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.farmers-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.farmers-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.farmers-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.farmers-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.farmers-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.farmers-footer-links li {
  margin-bottom: 0.4rem;
}

.farmers-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
  text-decoration: none;
}

.farmers-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.farmers-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.farmers-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.farmers-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.farmers-footer-input:focus {
  border-color: #2D7D3A;
}

.farmers-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 992px) {
  .farmers-search-box {
    flex-direction: column;
  }
  .farmers-search-field {
    flex: 1 1 100%;
  }
  .farmers-search-checkbox {
    flex: 1 1 100%;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 0.4rem 0.8rem;
  }
  .farmers-btn-filter {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .farmers-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    align-items: center;
  }
  .farmers-nav-links.open {
    display: flex;
    max-height: 500px;
    opacity: 1;
    padding: 1.2rem 0 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.6rem;
  }
  .farmers-nav-links li {
    width: 100%;
    text-align: center;
  }
  .farmers-nav-links .farmers-nav-link {
    width: 100%;
    text-align: center;
    display: block;
  }
  .farmers-nav-cta-wrapper {
    width: 100%;
    justify-content: center;
  }
  .farmers-hamburger {
    display: flex;
  }

  .farmers-page-header {
    padding: 3rem 1rem;
  }
  .farmers-grid-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .farmers-card-image {
    height: 160px;
  }
  .farmers-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .farmers-logo {
    font-size: 1.3rem;
  }
  .farmers-page-title {
    font-size: 1.6rem;
  }
  .farmers-search-box {
    padding: 0.5rem;
  }
  .farmers-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================
   farmer-detail.css · FarmConnect Farmer Detail
   Unique "detail-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR ----- */
.detail-navbar {
  background: #0A1F0E;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.detail-logo-wrapper {
  display: flex;
  align-items: center;
}

.detail-logo {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.detail-logo-icon {
  color: #2D7D3A;
  font-size: 1.8rem;
}

.detail-nav-links {
  display: flex;
  align-items: center;
  gap: 0.8rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.detail-nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: 0.25s ease;
  text-decoration: none;
}

.detail-nav-link:hover,
.detail-nav-link.active {
  color: #FFFFFF;
  border-bottom-color: #2D7D3A;
}

.detail-nav-cta-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Buttons */
.detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.detail-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.detail-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.detail-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

.detail-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.detail-btn-outline {
  border: 1.5px solid #2D7D3A;
  color: #2D7D3A;
  background: transparent;
}

.detail-btn-outline:hover {
  background: #2D7D3A;
  color: #FFFFFF;
}

.detail-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.detail-btn-lg {
  padding: 0.8rem 2rem;
  font-size: 1.05rem;
}

.detail-btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.detail-btn-whatsapp:hover {
  background: #1DA851;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  color: #FFFFFF;
}

.detail-btn-view {
  width: 100%;
  margin-top: 0.5rem;
}

.detail-btn-report {
  color: #6B7280;
  background: transparent;
  border: 1px solid #E5E7EB;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding: 0.4rem 1.2rem;
}

.detail-btn-report:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #DC2626;
}

/* Hamburger */
.detail-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}

.detail-hamburger-bar {
  width: 26px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
  transform-origin: center;
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- FARMER HEADER (dark green) ----- */
.detail-farmer-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.detail-farmer-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.detail-farmer-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.detail-farmer-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.detail-farmer-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
}

/* ----- PROFILE SECTION (white) ----- */
.detail-profile-section {
  background: #FFFFFF;
  padding: 3rem 0;
}

.detail-profile-image-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.detail-profile-image {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-color: #F0F5F0;
}

.detail-profile-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(45, 125, 58, 0.95);
  color: #FFFFFF;
  padding: 0.4rem 1rem;
  border-radius: 60px;
  font-weight: 600;
  font-size: 0.85rem;
  backdrop-filter: blur(4px);
}

.detail-profile-badge i {
  margin-right: 0.3rem;
}

.detail-profile-info {
  padding: 0.5rem 0;
}

.detail-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.detail-profile-name {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.detail-verified-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 60px;
  background: #DFF0E0;
  color: #236B2E;
  white-space: nowrap;
}

.detail-verified-badge i {
  margin-right: 0.3rem;
}

.detail-profile-specialization {
  font-weight: 600;
  color: #374151;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.detail-profile-specialization i {
  color: #2D7D3A;
  margin-right: 0.3rem;
}

.detail-profile-location {
  color: #6B7280;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.detail-profile-location i {
  margin-right: 0.3rem;
}

.detail-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.detail-profile-experience {
  color: #6B7280;
  font-size: 0.95rem;
}

.detail-profile-experience i {
  margin-right: 0.3rem;
}

.detail-profile-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #F59E0B;
  font-size: 0.95rem;
}

.detail-profile-rating span {
  color: #6B7280;
  font-weight: 500;
}

.detail-profile-bio {
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1.5rem;
}

.detail-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* ----- PRODUCE SECTION (white) ----- */
.detail-produce-section {
  background: #FFFFFF;
  padding: 2rem 0 3rem;
  border-top: 1px solid #F0F5F0;
}

.detail-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
}

.detail-produce-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #E5E7EB;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-produce-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(45, 125, 58, 0.15);
  border-color: rgba(45, 125, 58, 0.2);
}

.detail-produce-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #F0F5F0;
  flex-shrink: 0;
}

.detail-produce-body {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.detail-produce-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.detail-produce-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.detail-produce-price {
  font-weight: 700;
  font-size: 1.2rem;
  color: #2D7D3A;
}

.detail-produce-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  border-radius: 60px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-status-available {
  background: #DFF0E0;
  color: #236B2E;
}

.detail-status-low {
  background: #FEF3C7;
  color: #B45309;
}

.detail-status-sold {
  background: #FEE2E2;
  color: #DC2626;
}

.detail-produce-quantity {
  font-size: 0.85rem;
  color: #6B7280;
  margin-bottom: 0.3rem;
}

.detail-produce-quantity i {
  margin-right: 0.3rem;
}

.detail-produce-trust {
  font-size: 0.8rem;
  color: #2D7D3A;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.detail-produce-trust i {
  margin-right: 0.3rem;
}

/* ----- REVIEWS SECTION ----- */
.detail-reviews-section {
  background: #FFFFFF;
  padding: 2rem 0 3rem;
  border-top: 1px solid #F0F5F0;
}

.detail-reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.detail-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.detail-review-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: #F7FAF7;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}

.detail-review-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.detail-review-content {
  flex: 1;
}

.detail-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.detail-review-name {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  margin: 0;
}

.detail-review-stars {
  color: #F59E0B;
  font-size: 0.85rem;
}

.detail-review-text {
  color: #374151;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

.detail-review-date {
  font-size: 0.8rem;
  color: #9CA3AF;
}

/* ----- FOOTER ----- */
.detail-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
}

.detail-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.detail-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.detail-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.detail-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.detail-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.detail-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-footer-links li {
  margin-bottom: 0.4rem;
}

.detail-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
  text-decoration: none;
}

.detail-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.detail-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.detail-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.detail-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.detail-footer-input:focus {
  border-color: #2D7D3A;
}

.detail-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ----- MODAL ----- */
.detail-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.detail-modal-overlay.active {
  display: flex;
}

.detail-modal {
  background: #FFFFFF;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: detailModalIn 0.3s ease;
}

@keyframes detailModalIn {
  from {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem 0.5rem;
  border-bottom: 1px solid #E5E7EB;
}

.detail-modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-modal-header h3 i {
  color: #EF4444;
}

.detail-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #6B7280;
  cursor: pointer;
  transition: 0.3s ease;
  line-height: 1;
}

.detail-modal-close:hover {
  color: #111827;
  transform: rotate(90deg);
}

.detail-modal-body {
  padding: 1.5rem;
}

.detail-form-group {
  margin-bottom: 1.25rem;
}

.detail-form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 0.3rem;
}

.detail-form-input,
.detail-form-textarea {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  transition: 0.3s ease;
  background: #FFFFFF;
  color: #111827;
}

.detail-form-input:focus,
.detail-form-textarea:focus {
  outline: none;
  border-color: #2D7D3A;
  box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.detail-form-input-readonly {
  background: #F7FAF7;
  color: #6B7280;
  cursor: not-allowed;
}

.detail-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.detail-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #E5E7EB;
  justify-content: flex-end;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 992px) {
  .detail-profile-image {
    height: 300px;
  }
  .detail-profile-actions {
    flex-direction: column;
  }
  .detail-profile-actions .detail-btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .detail-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    align-items: center;
  }
  .detail-nav-links.open {
    display: flex;
    max-height: 500px;
    opacity: 1;
    padding: 1.2rem 0 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.6rem;
  }
  .detail-nav-links li {
    width: 100%;
    text-align: center;
  }
  .detail-nav-links .detail-nav-link {
    width: 100%;
    text-align: center;
    display: block;
  }
  .detail-nav-cta-wrapper {
    width: 100%;
    justify-content: center;
  }
  .detail-hamburger {
    display: flex;
  }

  .detail-farmer-header {
    padding: 2rem 1rem;
  }
  .detail-profile-image {
    height: 250px;
  }
  .detail-profile-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .detail-profile-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  .detail-review-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .detail-review-header {
    justify-content: center;
  }
  .detail-modal {
    margin: 1rem;
    max-height: 95vh;
  }
  .detail-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .detail-logo {
    font-size: 1.3rem;
  }
  .detail-farmer-title {
    font-size: 1.6rem;
  }
  .detail-profile-image {
    height: 200px;
  }
  .detail-modal-footer {
    flex-direction: column;
  }
  .detail-modal-footer .detail-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   ADDITIONS FOR FARMER DETAIL PAGE
   ============================================================ */

/* ----- Member Since ----- */
.detail-profile-member {
    color: #6B7280;
    font-size: 0.95rem;
}

.detail-profile-member i {
    margin-right: 0.3rem;
    color: #2D7D3A;
}

/* ----- Product Card Category ----- */
.marketplace-card-category {
    font-size: 0.7rem;
    color: #6B7280;
    margin-bottom: 0.4rem;
}

.marketplace-card-category i {
    color: #2D7D3A;
    margin-right: 0.2rem;
}

/* ----- Contact Modal ----- */
.detail-contact-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.detail-contact-modal-overlay.active {
    display: flex;
}

.detail-contact-modal {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: contactModalIn 0.3s ease;
    position: relative;
}

@keyframes contactModalIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.detail-contact-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #6B7280;
    cursor: pointer;
    transition: 0.3s ease;
    line-height: 1;
}

.detail-contact-modal-close:hover {
    color: #111827;
    transform: rotate(90deg);
}

.detail-contact-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.detail-contact-modal-icon i {
    font-size: 2rem;
    color: #F59E0B;
}

.detail-contact-modal h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.detail-contact-modal p {
    font-size: 0.95rem;
    color: #6B7280;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.detail-contact-modal-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.detail-contact-modal-buttons .detail-btn {
    min-width: 120px;
    justify-content: center;
}

.detail-contact-modal-note {
    font-size: 0.8rem !important;
    color: #9CA3AF !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* ----- Review Modal ----- */
.detail-review-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.detail-review-modal-overlay.active {
    display: flex;
}

.detail-review-modal {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: reviewModalIn 0.3s ease;
}

@keyframes reviewModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.detail-review-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #E5E7EB;
}

.detail-review-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.detail-review-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #6B7280;
    cursor: pointer;
    transition: 0.3s ease;
    line-height: 1;
}

.detail-review-modal-close:hover {
    color: #111827;
    transform: rotate(90deg);
}

.detail-review-modal-body {
    padding: 1.5rem;
}

.detail-review-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #E5E7EB;
    justify-content: flex-end;
}

/* Star Rating */
.detail-star-rating {
    display: flex;
    gap: 0.3rem;
    font-size: 1.8rem;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.detail-star-rating i {
    color: #D1D5DB;
    transition: color 0.2s ease;
}

.detail-star-rating i.active {
    color: #F59E0B;
}

.detail-star-rating i:hover {
    color: #F59E0B;
}

.detail-rating-text {
    font-size: 0.85rem;
    color: #6B7280;
}

/* ----- CTA Section ----- */
.detail-cta-section {
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
    padding: 4rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-cta-wrapper {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.detail-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.detail-cta-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.detail-btn-cta {
    padding: 0.8rem 2.5rem;
    font-size: 1.05rem;
    gap: 0.75rem;
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(45, 125, 58, 0.25);
    transition: all 0.3s ease;
}

.detail-btn-cta:hover {
    background: #236B2E;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

.detail-btn-cta i:last-child {
    transition: transform 0.3s ease;
}

.detail-btn-cta:hover i:last-child {
    transform: translateX(6px);
}

/* ----- Report button on same line ----- */
.detail-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.detail-profile-actions .detail-btn {
    flex: 1 1 auto;
    min-width: 140px;
}

.detail-btn-report {
    color: #6B7280;
    background: transparent;
    border: 1.5px solid #E5E7EB;
    font-size: 0.95rem;
    padding: 0.6rem 1.5rem;
    border-radius: 60px;
    font-weight: 600;
    transition: 0.25s ease;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 140px;
}

.detail-btn-report:hover {
    background: #FEE2E2;
    border-color: #EF4444;
    color: #DC2626;
}

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */

@media screen and (max-width: 992px) {
    .detail-profile-actions {
        flex-direction: column;
    }
    .detail-profile-actions .detail-btn,
    .detail-btn-report {
        width: 100%;
        justify-content: center;
        flex: 1 1 100%;
        min-width: unset;
    }
}

@media screen and (max-width: 768px) {
    .detail-contact-modal {
        margin: 1rem;
        padding: 1.5rem;
    }
    .detail-produce-grid {
      margin-bottom: 2rem;
    }

    .detail-review-modal {
        margin: 1rem;
    }
    .detail-cta-section {
        padding: 3rem 1rem;
    }
    .detail-cta-title {
        font-size: 1.6rem;
    }
    .detail-cta-subtitle {
        font-size: 0.95rem;
    }
    .detail-btn-cta {
        padding: 0.7rem 2rem;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }
    .detail-profile-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media screen and (max-width: 480px) {
    .detail-contact-modal {
        padding: 1.25rem;
    }
    .detail-contact-modal-buttons .detail-btn {
        min-width: 100px;
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }
    .detail-contact-modal-icon {
        width: 50px;
        height: 50px;
    }
    .detail-contact-modal-icon i {
        font-size: 1.5rem;
    }
    .detail-cta-section {
        padding: 2rem 0.75rem;
    }
    .detail-cta-title {
        font-size: 1.3rem;
    }
    .detail-cta-subtitle {
        font-size: 0.85rem;
    }
    .detail-btn-cta {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }
    .detail-review-modal-footer {
        flex-direction: column;
    }
    .detail-review-modal-footer .detail-btn {
        width: 100%;
        justify-content: center;
    }
    .detail-star-rating {
        font-size: 1.5rem;
    }
}

/* ============================================================
   MOBILE ALIGNMENT & SPACING FIXES
   ============================================================ */

/* ----- Mobile: Left align profile content ----- */
@media screen and (max-width: 768px) {
    .detail-profile-info {
        text-align: left !important;
        padding: 0 0.5rem !important;
    }

    .detail-profile-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.3rem !important;
    }

    .detail-profile-specialization,
    .detail-profile-location {
        text-align: left !important;
    }

    .detail-profile-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }

    .detail-profile-rating {
        justify-content: flex-start !important;
    }

    .detail-profile-bio {
        text-align: left !important;
    }

    .detail-profile-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .detail-profile-actions .detail-btn,
    .detail-btn-report {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Profile image - smaller on mobile */
    .detail-profile-image {
        height: 250px !important;
    }

    .detail-profile-badge {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.7rem !important;
    }
}

/* ----- Farm Produce Section - More spacing ----- */
.detail-produce-section {
    padding: 3rem 0 4rem !important;
}

.detail-section-title {
    margin-bottom: 2rem !important;
}

/* ----- Product Cards - Better spacing ----- */
.marketplace-card {
    margin-bottom: 0.5rem !important;
}

.marketplace-card-body {
    padding: 1rem 1rem 1.2rem !important;
}

.marketplace-card-name {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
}

.marketplace-card-footer {
    padding-top: 0.5rem !important;
    margin-top: 0.3rem !important;
}

.marketplace-card-price {
    font-size: 1.05rem !important;
}

.marketplace-card-img {
    height: 180px !important;
}

/* ----- CTA Section spacing ----- */
.detail-cta-section {
    padding: 3.5rem 1.5rem !important;
}

/* ============================================================
   EXTRA SMALL SCREENS (320px - 480px)
   ============================================================ */

@media screen and (max-width: 480px) {
    .detail-profile-section {
        padding: 2rem 0 !important;
    }

    .detail-profile-image {
        height: 200px !important;
    }

    .detail-profile-name {
        font-size: 1.3rem !important;
    }

    .detail-profile-specialization {
        font-size: 0.9rem !important;
    }

    .detail-profile-location {
        font-size: 0.85rem !important;
    }

    .detail-profile-meta {
        font-size: 0.85rem !important;
        gap: 0.3rem !important;
    }

    .detail-profile-bio {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .detail-produce-section {
        padding: 2rem 0 3rem !important;
    }

    .detail-section-title {
        font-size: 1.3rem !important;
        margin-bottom: 1.5rem !important;
    }

    .marketplace-card-img {
        height: 150px !important;
    }

    .marketplace-card-body {
        padding: 0.8rem !important;
    }

    .marketplace-card-name {
        font-size: 0.9rem !important;
    }

    .marketplace-card-price {
        font-size: 0.95rem !important;
    }

    .marketplace-card-seller,
    .marketplace-card-location {
        font-size: 0.75rem !important;
    }

    .marketplace-card-rating {
        font-size: 0.75rem !important;
    }

    .marketplace-btn-view {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.6rem !important;
    }

    .detail-cta-section {
        padding: 2.5rem 0.75rem !important;
    }

    .detail-cta-title {
        font-size: 1.3rem !important;
    }

    .detail-cta-subtitle {
        font-size: 0.85rem !important;
    }

    .detail-btn-cta {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Review items on mobile */
    .detail-review-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1rem !important;
    }

    .detail-review-header {
        justify-content: center !important;
    }

    .detail-review-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .detail-reviews-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .detail-reviews-header .detail-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
   TABLET SCREENS (481px - 768px)
   ============================================================ */

@media screen and (min-width: 481px) and (max-width: 768px) {
    .detail-profile-section {
        padding: 2.5rem 0 !important;
    }

    .detail-profile-image {
        height: 280px !important;
    }

    .marketplace-card-img {
        height: 170px !important;
    }

    .detail-produce-section {
        padding: 2.5rem 0 3.5rem !important;
    }

    .detail-cta-section {
        padding: 3rem 1.25rem !important;
    }

    .detail-cta-title {
        font-size: 1.5rem !important;
    }
}

/* ============================================================
   DESKTOP REFINEMENTS
   ============================================================ */

@media screen and (min-width: 769px) {
    .detail-profile-actions {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .detail-profile-actions .detail-btn,
    .detail-btn-report {
        flex: 1 1 auto !important;
        min-width: 140px !important;
    }

    .marketplace-card-img {
        height: 200px !important;
    }

    /* Better spacing between produce cards */
    .detail-produce-grid {
        gap: 1.5rem !important;
    }
}

@media screen and (min-width: 992px) {
    .detail-produce-grid {
        gap: 1.75rem !important;
    }

    .marketplace-card-img {
        height: 220px !important;
    }
}

/* Mobile: Badge stays beside name */
@media screen and (max-width: 768px) {
    .detail-profile-header {
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 0.3rem !important;
    }

    .detail-profile-name {
        font-size: 1.3rem !important;
    }

    .detail-verified-badge {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.6rem !important;
    }
}

@media screen and (max-width: 400px) {
    .detail-profile-header {
        gap: 0.3rem !important;
    }

    .detail-profile-name {
        font-size: 1.1rem !important;
    }

    .detail-verified-badge {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.5rem !important;
    }

    .detail-verified-badge i {
        font-size: 0.55rem !important;
    }
}

/* ============================================================
   FORCE HIDE REPORT MODAL WHEN LOGIN MODAL IS ACTIVE
   ============================================================ */

/* Hide report modal when login modal is active */
.detail-contact-modal-overlay.active ~ .detail-modal-overlay {
    display: none !important;
}

/* Also hide if login modal is active anywhere on page */
body:has(.detail-contact-modal-overlay.active) .detail-modal-overlay {
    display: none !important;
}

/* Ensure report modal is hidden when login modal shows */
.detail-contact-modal-overlay.active + .detail-modal-overlay,
.detail-contact-modal-overlay.active ~ .detail-modal-overlay {
    display: none !important;
}

/* Also hide if they are siblings */
.detail-modal-overlay:has(~ .detail-contact-modal-overlay.active) {
    display: none !important;
}

/* ============================================================
   logistics.css · FarmConnect Logistics Page
   Unique "logistics-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR ----- */
.logistics-navbar {
  background: #0A1F0E;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.logistics-nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logistics-logo-wrapper {
  display: flex;
  align-items: center;
}

.logistics-logo {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.logistics-logo-icon {
  color: #2D7D3A;
  font-size: 1.8rem;
}

.logistics-nav-links {
  display: flex;
  align-items: center;
  gap: 0.8rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.logistics-nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: 0.25s ease;
  text-decoration: none;
}

.logistics-nav-link:hover,
.logistics-nav-link.active {
  color: #FFFFFF;
  border-bottom-color: #2D7D3A;
}

.logistics-nav-cta-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Buttons */
.logistics-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.logistics-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.logistics-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.logistics-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

.logistics-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.logistics-btn-outline {
  border: 1.5px solid #2D7D3A;
  color: #2D7D3A;
  background: transparent;
}

.logistics-btn-outline:hover {
  background: #2D7D3A;
  color: #FFFFFF;
}

.logistics-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.logistics-btn-view {
  width: 100%;
  margin-top: 0.5rem;
}

.logistics-btn-filter {
  padding: 0.6rem 2rem;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Hamburger */
.logistics-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}

.logistics-hamburger-bar {
  width: 26px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
  transform-origin: center;
}

.logistics-hamburger.active .logistics-hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.logistics-hamburger.active .logistics-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.logistics-hamburger.active .logistics-hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- PAGE HEADER (dark green) ----- */
.logistics-page-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.logistics-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.logistics-page-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.logistics-page-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.logistics-page-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ----- SEARCH & FILTER SECTION (white) ----- */
.logistics-search-section {
  background: #FFFFFF;
  padding: 2.5rem 0;
  border-bottom: 1px solid #E5E7EB;
}

.logistics-search-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.logistics-search-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #F0F5F0;
  padding: 0.75rem;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.logistics-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 160px;
  background: #FFFFFF;
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  transition: 0.3s ease;
}

.logistics-search-field:focus-within {
  border-color: #2D7D3A;
  box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.logistics-search-icon {
  color: #6B7280;
  font-size: 0.9rem;
}

.logistics-search-input {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 0;
  width: 100%;
  font-weight: 400;
  color: #111827;
  outline: none;
  font-family: 'Inter', sans-serif;
}

.logistics-search-input::placeholder {
  color: #9CA3AF;
}

.logistics-search-select {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 1.8rem 0.6rem 0.2rem;
  font-weight: 400;
  color: #111827;
  appearance: none;
  outline: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
}

/* ----- GRID SECTION ----- */
.logistics-grid-section {
  background: #FFFFFF;
  padding: 3rem 0 4rem;
}

.logistics-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.logistics-grid-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.logistics-grid-count {
  font-size: 0.95rem;
  color: #6B7280;
  font-weight: 500;
}

/* ----- CARDS ----- */
.logistics-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #E5E7EB;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.logistics-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(45, 125, 58, 0.15);
  border-color: rgba(45, 125, 58, 0.2);
}

.logistics-card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #F0F5F0;
  flex-shrink: 0;
}

.logistics-card-body {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.logistics-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.logistics-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.logistics-verified-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 60px;
  background: #DFF0E0;
  color: #236B2E;
  white-space: nowrap;
}

.logistics-verified-badge i {
  margin-right: 0.2rem;
}

.logistics-unverified-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 60px;
  background: #FEF3C7;
  color: #B45309;
  white-space: nowrap;
}

.logistics-unverified-badge i {
  margin-right: 0.2rem;
}

.logistics-card-service {
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.logistics-card-service i {
  color: #2D7D3A;
  margin-right: 0.3rem;
  width: 1rem;
}

.logistics-card-location {
  font-size: 0.85rem;
  color: #6B7280;
  margin-bottom: 0.5rem;
}

.logistics-card-location i {
  margin-right: 0.3rem;
}

.logistics-card-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #F59E0B;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.logistics-card-rating span {
  color: #6B7280;
  font-weight: 500;
}

.logistics-card-status {
  margin-bottom: 0.75rem;
}

.logistics-status-available {
  font-size: 0.85rem;
  font-weight: 600;
  color: #236B2E;
}

.logistics-status-available i {
  color: #10B981;
  margin-right: 0.3rem;
  font-size: 0.6rem;
}

.logistics-status-busy {
  font-size: 0.85rem;
  font-weight: 600;
  color: #B45309;
}

.logistics-status-busy i {
  color: #F59E0B;
  margin-right: 0.3rem;
  font-size: 0.6rem;
}

.logistics-status-offline {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6B7280;
}

.logistics-status-offline i {
  color: #9CA3AF;
  margin-right: 0.3rem;
  font-size: 0.6rem;
}

/* ----- EMPTY STATE ----- */
.logistics-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  display: none;
}

.logistics-empty-state.show {
  display: block;
}

.logistics-empty-icon {
  font-size: 3rem;
  color: #6B7280;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.logistics-empty-state h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.logistics-empty-state p {
  color: #6B7280;
}

/* ----- FOOTER ----- */
.logistics-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.logistics-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
}

.logistics-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.logistics-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.logistics-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.logistics-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.logistics-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.logistics-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.logistics-footer-links li {
  margin-bottom: 0.4rem;
}

.logistics-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
  text-decoration: none;
}

.logistics-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.logistics-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.logistics-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.logistics-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.logistics-footer-input:focus {
  border-color: #2D7D3A;
}

.logistics-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 992px) {
  .logistics-search-box {
    flex-direction: column;
  }
  .logistics-search-field {
    flex: 1 1 100%;
  }
  .logistics-btn-filter {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .logistics-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    align-items: center;
  }
  .logistics-nav-links.open {
    display: flex;
    max-height: 500px;
    opacity: 1;
    padding: 1.2rem 0 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.6rem;
  }
  .logistics-nav-links li {
    width: 100%;
    text-align: center;
  }
  .logistics-nav-links .logistics-nav-link {
    width: 100%;
    text-align: center;
    display: block;
  }
  .logistics-nav-cta-wrapper {
    width: 100%;
    justify-content: center;
  }
  .logistics-hamburger {
    display: flex;
  }

  .logistics-page-header {
    padding: 3rem 1rem;
  }
  .logistics-grid-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .logistics-card-image {
    height: 160px;
  }
  .logistics-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .logistics-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .logistics-logo {
    font-size: 1.3rem;
  }
  .logistics-page-title {
    font-size: 1.6rem;
  }
  .logistics-search-box {
    padding: 0.5rem;
  }
}
/* Hide empty state by default */
.logistics-empty-state {
    display: none !important;
}

.logistics-empty-state.show {
    display: block !important;
}


/* ============================================================
   logistics-detail.css · FarmConnect Logistics Detail + Tracking
   Unique "detail-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR ----- */
.detail-navbar {
  background: #0A1F0E;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.detail-logo-wrapper {
  display: flex;
  align-items: center;
}

.detail-logo {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.detail-logo-icon {
  color: #2D7D3A;
  font-size: 1.8rem;
}

.detail-nav-links {
  display: flex;
  align-items: center;
  gap: 0.8rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.detail-nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: 0.25s ease;
  text-decoration: none;
}

.detail-nav-link:hover,
.detail-nav-link.active {
  color: #FFFFFF;
  border-bottom-color: #2D7D3A;
}

.detail-nav-cta-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Buttons */
.detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.detail-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.detail-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.detail-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

.detail-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.detail-btn-outline {
  border: 1.5px solid #2D7D3A;
  color: #2D7D3A;
  background: transparent;
}

.detail-btn-outline:hover {
  background: #2D7D3A;
  color: #FFFFFF;
}

.detail-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.detail-btn-lg {
  padding: 0.8rem 2rem;
  font-size: 1.05rem;
}

.detail-btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.detail-btn-whatsapp:hover {
  background: #1DA851;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  color: #FFFFFF;
}

.detail-btn-report {
  color: #6B7280;
  background: transparent;
  border: 1px solid #E5E7EB;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding: 0.4rem 1.2rem;
}

.detail-btn-report:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #DC2626;
}

/* Hamburger */
.detail-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
}

.detail-hamburger-bar {
  width: 26px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 4px;
  transition: 0.3s ease-in-out;
  transform-origin: center;
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.detail-hamburger.active .detail-hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- LOGISTICS HEADER (dark green) ----- */
.detail-logistics-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.detail-logistics-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.detail-logistics-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.detail-logistics-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.detail-logistics-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
}

/* ----- PROFILE SECTION (white) ----- */
.detail-profile-section {
  background: #FFFFFF;
  padding: 3rem 0;
}

.detail-profile-image-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.detail-profile-image {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-color: #F0F5F0;
}

.detail-profile-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(45, 125, 58, 0.95);
  color: #FFFFFF;
  padding: 0.4rem 1rem;
  border-radius: 60px;
  font-weight: 600;
  font-size: 0.85rem;
  backdrop-filter: blur(4px);
}

.detail-profile-badge i {
  margin-right: 0.3rem;
}

.detail-profile-info {
  padding: 0.5rem 0;
}

.detail-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.detail-profile-name {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.detail-verified-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 60px;
  background: #DFF0E0;
  color: #236B2E;
  white-space: nowrap;
}

.detail-verified-badge i {
  margin-right: 0.3rem;
}

.detail-profile-service {
  font-weight: 600;
  color: #374151;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.detail-profile-service i {
  color: #2D7D3A;
  margin-right: 0.3rem;
}

.detail-profile-location {
  color: #6B7280;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.detail-profile-location i {
  margin-right: 0.3rem;
}

.detail-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1rem;
  align-items: center;
}

.detail-profile-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #F59E0B;
  font-size: 0.95rem;
}

.detail-profile-rating span {
  color: #6B7280;
  font-weight: 500;
}

.detail-profile-availability {
  font-weight: 600;
  font-size: 0.95rem;
}

.detail-status-available {
  color: #236B2E;
}

.detail-status-available i {
  color: #10B981;
  margin-right: 0.3rem;
  font-size: 0.6rem;
}

.detail-profile-bio {
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1.5rem;
}

.detail-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* ----- TRACKING SECTION (white - CORE) ----- */
.detail-tracking-section {
  background: #FFFFFF;
  padding: 2rem 0 3rem;
  border-top: 1px solid #F0F5F0;
}

.detail-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.detail-tracking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-tracking-id {
  background: #F7FAF7;
  padding: 0.4rem 1rem;
  border-radius: 60px;
  border: 1px solid #E5E7EB;
}

.detail-tracking-label {
  font-weight: 500;
  color: #6B7280;
  font-size: 0.85rem;
}

.detail-tracking-number {
  font-weight: 700;
  color: #2D7D3A;
  font-size: 0.95rem;
  margin-left: 0.3rem;
}

/* Shipment Details Cards */
.detail-shipment-details {
  margin-bottom: 2rem;
}

.detail-shipment-card {
  background: #F7FAF7;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  text-align: center;
  height: 100%;
}

.detail-shipment-icon {
  display: block;
  font-size: 1.5rem;
  color: #2D7D3A;
  margin-bottom: 0.3rem;
}

.detail-shipment-label {
  display: block;
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.detail-shipment-value {
  display: block;
  font-weight: 600;
  color: #111827;
  font-size: 0.95rem;
  margin-top: 0.1rem;
}

/* Progress Bar */
.detail-progress-wrapper {
  margin-bottom: 2.5rem;
}

.detail-progress-label {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 0.3rem;
}

.detail-progress-bar {
  height: 8px;
  background: #E5E7EB;
  border-radius: 60px;
  overflow: hidden;
}

.detail-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2D7D3A, #236B2E);
  border-radius: 60px;
  transition: width 0.8s ease;
}

/* Tracking Timeline */
.detail-tracking-timeline {
  position: relative;
  padding-left: 2.5rem;
}

.detail-tracking-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #E5E7EB;
}

.detail-timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
}

.detail-timeline-item:last-child {
  margin-bottom: 0;
}

.detail-timeline-marker {
  position: absolute;
  left: -2.5rem;
  top: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 50%;
  z-index: 2;
}

.detail-timeline-item.completed .detail-timeline-marker {
  color: #2D7D3A;
}

.detail-timeline-item.completed .detail-timeline-marker i {
  font-size: 1.2rem;
}

.detail-timeline-item.active .detail-timeline-marker {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(45, 125, 58, 0.2);
}

.detail-timeline-item.pending .detail-timeline-marker {
  color: #9CA3AF;
}

.detail-timeline-item.pending .detail-timeline-marker i {
  font-size: 1.2rem;
}

.detail-timeline-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-timeline-item.completed .detail-timeline-content h4 {
  color: #111827;
}

.detail-timeline-item.active .detail-timeline-content h4 {
  color: #2D7D3A;
}

.detail-timeline-item.pending .detail-timeline-content h4 {
  color: #9CA3AF;
}

.detail-timeline-content p {
  font-size: 0.9rem;
  color: #6B7280;
  margin: 0 0 0.1rem;
}

.detail-timeline-time {
  font-size: 0.8rem;
  color: #9CA3AF;
}

.detail-live-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #FFFFFF;
  background: #EF4444;
  padding: 0.1rem 0.5rem;
  border-radius: 60px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  animation: detailPulse 1.5s ease-in-out infinite;
}

@keyframes detailPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Pulse Dot for Live Tracking */
.detail-pulse-dot {
  width: 12px;
  height: 12px;
  background: #2D7D3A;
  border-radius: 50%;
  position: relative;
  animation: detailPulseDot 1.5s ease-in-out infinite;
}

@keyframes detailPulseDot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(45, 125, 58, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(45, 125, 58, 0);
  }
}

/* Tracking Actions */
.detail-tracking-actions {
  margin-top: 2rem;
  text-align: center;
}

/* ----- REVIEWS SECTION ----- */
.detail-reviews-section {
  background: #FFFFFF;
  padding: 2rem 0 3rem;
  border-top: 1px solid #F0F5F0;
}

.detail-reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.detail-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.detail-review-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: #F7FAF7;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}

.detail-review-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.detail-review-content {
  flex: 1;
}

.detail-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.detail-review-name {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
  margin: 0;
}

.detail-review-stars {
  color: #F59E0B;
  font-size: 0.85rem;
}

.detail-review-text {
  color: #374151;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

.detail-review-date {
  font-size: 0.8rem;
  color: #9CA3AF;
}

/* ----- FOOTER ----- */
.detail-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
}

.detail-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.detail-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.detail-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.detail-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.detail-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.detail-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-footer-links li {
  margin-bottom: 0.4rem;
}

.detail-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
  text-decoration: none;
}

.detail-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.detail-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.detail-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.detail-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.detail-footer-input:focus {
  border-color: #2D7D3A;
}

.detail-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ----- MODAL ----- */
.detail-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.detail-modal-overlay.active {
  display: flex;
}

.detail-modal {
  background: #FFFFFF;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: detailModalIn 0.3s ease;
}

@keyframes detailModalIn {
  from {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem 0.5rem;
  border-bottom: 1px solid #E5E7EB;
}

.detail-modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-modal-header h3 i {
  color: #EF4444;
}

.detail-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #6B7280;
  cursor: pointer;
  transition: 0.3s ease;
  line-height: 1;
}

.detail-modal-close:hover {
  color: #111827;
  transform: rotate(90deg);
}

.detail-modal-body {
  padding: 1.5rem;
}

.detail-form-group {
  margin-bottom: 1.25rem;
}

.detail-form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 0.3rem;
}

.detail-form-input,
.detail-form-textarea {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  transition: 0.3s ease;
  background: #FFFFFF;
  color: #111827;
}

.detail-form-input:focus,
.detail-form-textarea:focus {
  outline: none;
  border-color: #2D7D3A;
  box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.detail-form-input-readonly {
  background: #F7FAF7;
  color: #6B7280;
  cursor: not-allowed;
}

.detail-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.detail-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #E5E7EB;
  justify-content: flex-end;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 992px) {
  .detail-profile-image {
    height: 300px;
  }
  .detail-profile-actions {
    flex-direction: column;
  }
  .detail-profile-actions .detail-btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .detail-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    align-items: center;
  }
  .detail-nav-links.open {
    display: flex;
    max-height: 500px;
    opacity: 1;
    padding: 1.2rem 0 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.6rem;
  }
  .detail-nav-links li {
    width: 100%;
    text-align: center;
  }
  .detail-nav-links .detail-nav-link {
    width: 100%;
    text-align: center;
    display: block;
  }
  .detail-nav-cta-wrapper {
    width: 100%;
    justify-content: center;
  }
  .detail-hamburger {
    display: flex;
  }

  .detail-logistics-header {
    padding: 2rem 1rem;
  }
  .detail-profile-image {
    height: 250px;
  }
  .detail-profile-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .detail-profile-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  .detail-tracking-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .detail-shipment-card {
    padding: 0.75rem;
  }
  .detail-review-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .detail-review-header {
    justify-content: center;
  }
  .detail-modal {
    margin: 1rem;
    max-height: 95vh;
  }
  .detail-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .detail-logo {
    font-size: 1.3rem;
  }
  .detail-logistics-title {
    font-size: 1.6rem;
  }
  .detail-profile-image {
    height: 200px;
  }
  .detail-modal-footer {
    flex-direction: column;
  }
  .detail-modal-footer .detail-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   ADDITIONS FOR LOGISTICS DETAIL PAGE
   ============================================================ */

/* ----- Profile Meta Items ----- */
.detail-profile-experience,
.detail-profile-vehicles,
.detail-profile-member {
    color: #6B7280;
    font-size: 0.95rem;
}

.detail-profile-experience i,
.detail-profile-vehicles i,
.detail-profile-member i {
    margin-right: 0.3rem;
    color: #2D7D3A;
}

/* ----- Vehicle Types Section ----- */
.detail-vehicles-section {
    background: #FFFFFF;
    padding: 3rem 0 4rem;
    border-top: 1px solid #F0F5F0;
}

.detail-vehicles-grid {
    margin-top: 0.5rem;
}

.detail-vehicle-card {
    background: #F7FAF7;
    padding: 2rem 1.5rem;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.detail-vehicle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45, 125, 58, 0.08);
    border-color: rgba(45, 125, 58, 0.2);
}

.detail-vehicle-icon {
    font-size: 2.5rem;
    color: #2D7D3A;
    margin-bottom: 0.75rem;
}

.detail-vehicle-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.4rem;
}

.detail-vehicle-card p {
    font-size: 0.9rem;
    color: #6B7280;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.detail-vehicle-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.8rem;
    border-radius: 60px;
    background: #DFF0E0;
    color: #236B2E;
}

.detail-vehicle-status:contains("Limited") {
    background: #FEF3C7;
    color: #B45309;
}

/* ----- Tracking Note ----- */
.detail-tracking-note {
    font-size: 0.9rem;
    color: #6B7280;
    background: #F7FAF7;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    margin-bottom: 1.5rem;
}

.detail-tracking-note i {
    color: #2D7D3A;
    margin-right: 0.5rem;
}

/* ----- Contact Modal ----- */
.detail-contact-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.detail-contact-modal-overlay.active {
    display: flex;
}

.detail-contact-modal {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: contactModalIn 0.3s ease;
    position: relative;
}

@keyframes contactModalIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.detail-contact-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #6B7280;
    cursor: pointer;
    transition: 0.3s ease;
    line-height: 1;
}

.detail-contact-modal-close:hover {
    color: #111827;
    transform: rotate(90deg);
}

.detail-contact-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.detail-contact-modal-icon i {
    font-size: 2rem;
    color: #F59E0B;
}

.detail-contact-modal h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.detail-contact-modal p {
    font-size: 0.95rem;
    color: #6B7280;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.detail-contact-modal-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.detail-contact-modal-buttons .detail-btn {
    min-width: 120px;
    justify-content: center;
}

.detail-contact-modal-note {
    font-size: 0.8rem !important;
    color: #9CA3AF !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* ----- Review Modal ----- */
.detail-review-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.detail-review-modal-overlay.active {
    display: flex;
}

.detail-review-modal {
    background: #FFFFFF;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: reviewModalIn 0.3s ease;
}

@keyframes reviewModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.detail-review-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #E5E7EB;
}

.detail-review-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.detail-review-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #6B7280;
    cursor: pointer;
    transition: 0.3s ease;
    line-height: 1;
}

.detail-review-modal-close:hover {
    color: #111827;
    transform: rotate(90deg);
}

.detail-review-modal-body {
    padding: 1.5rem;
}

.detail-review-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #E5E7EB;
    justify-content: flex-end;
}

/* Star Rating */
.detail-star-rating {
    display: flex;
    gap: 0.3rem;
    font-size: 1.8rem;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.detail-star-rating i {
    color: #D1D5DB;
    transition: color 0.2s ease;
}

.detail-star-rating i.active {
    color: #F59E0B;
}

.detail-star-rating i:hover {
    color: #F59E0B;
}

.detail-rating-text {
    font-size: 0.85rem;
    color: #6B7280;
}

/* ----- CTA Section ----- */
.detail-cta-section {
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
    padding: 4rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-cta-wrapper {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.detail-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.detail-cta-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.detail-btn-cta {
    padding: 0.8rem 2.5rem;
    font-size: 1.05rem;
    gap: 0.75rem;
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(45, 125, 58, 0.25);
    transition: all 0.3s ease;
}

.detail-btn-cta:hover {
    background: #236B2E;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

.detail-btn-cta i:last-child {
    transition: transform 0.3s ease;
}

.detail-btn-cta:hover i:last-child {
    transform: translateX(6px);
}

/* ----- Report button on same line ----- */
.detail-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.detail-profile-actions .detail-btn {
    flex: 1 1 auto;
    min-width: 140px;
}

.detail-btn-report {
    color: #6B7280;
    background: transparent;
    border: 1.5px solid #E5E7EB;
    font-size: 0.95rem;
    padding: 0.6rem 1.5rem;
    border-radius: 60px;
    font-weight: 600;
    transition: 0.25s ease;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 140px;
}

.detail-btn-report:hover {
    background: #FEE2E2;
    border-color: #EF4444;
    color: #DC2626;
}

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */

@media screen and (max-width: 992px) {
    .detail-profile-actions {
        flex-direction: column;
    }
    .detail-profile-actions .detail-btn,
    .detail-btn-report {
        width: 100%;
        justify-content: center;
        flex: 1 1 100%;
        min-width: unset;
    }
}

@media screen and (max-width: 768px) {
    .detail-profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .detail-profile-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .detail-profile-rating {
        justify-content: flex-start;
    }

    .detail-profile-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-profile-actions .detail-btn,
    .detail-btn-report {
        width: 100%;
        justify-content: center;
    }

    .detail-vehicles-grid {
        gap: 1rem;
    }

    .detail-vehicle-card {
        padding: 1.5rem 1rem;
    }

    .detail-contact-modal {
        margin: 1rem;
        padding: 1.5rem;
    }

    .detail-review-modal {
        margin: 1rem;
    }

    .detail-cta-section {
        padding: 3rem 1rem;
    }

    .detail-cta-title {
        font-size: 1.6rem;
    }

    .detail-cta-subtitle {
        font-size: 0.95rem;
    }

    .detail-btn-cta {
        padding: 0.7rem 2rem;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }

    .detail-tracking-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-shipment-card {
        padding: 0.75rem;
    }
}

@media screen and (max-width: 480px) {
    .detail-contact-modal {
        padding: 1.25rem;
    }

    .detail-contact-modal-buttons .detail-btn {
        min-width: 100px;
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }

    .detail-contact-modal-icon {
        width: 50px;
        height: 50px;
    }

    .detail-contact-modal-icon i {
        font-size: 1.5rem;
    }

    .detail-cta-section {
        padding: 2rem 0.75rem;
    }

    .detail-cta-title {
        font-size: 1.3rem;
    }

    .detail-cta-subtitle {
        font-size: 0.85rem;
    }

    .detail-btn-cta {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }

    .detail-review-modal-footer {
        flex-direction: column;
    }

    .detail-review-modal-footer .detail-btn {
        width: 100%;
        justify-content: center;
    }

    .detail-star-rating {
        font-size: 1.5rem;
    }

    .detail-tracking-id {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .detail-tracking-number {
        font-size: 0.8rem;
    }

    .detail-vehicle-card {
        padding: 1rem 0.75rem;
    }

    .detail-vehicle-icon {
        font-size: 2rem;
    }

    .detail-vehicle-card h3 {
        font-size: 0.95rem;
    }

    .detail-vehicle-card p {
        font-size: 0.8rem;
    }
}

@media screen and (min-width: 769px) {
    .detail-profile-actions {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .detail-profile-actions .detail-btn,
    .detail-btn-report {
        flex: 1 1 auto;
        min-width: 140px;
    }
}
/* ============================================================
   SERVICE COVERAGE & HIGHLIGHTS SECTION
   ============================================================ */

.detail-coverage-section {
    background: #FFFFFF;
    padding: 3rem 0 4rem;
    border-top: 1px solid #F0F5F0;
}

.detail-coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 0.5rem;
}

.detail-coverage-card {
    background: #F7FAF7;
    padding: 2rem 1.5rem;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
}

.detail-coverage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45, 125, 58, 0.08);
    border-color: rgba(45, 125, 58, 0.2);
}

.detail-coverage-icon {
    font-size: 2.5rem;
    color: #2D7D3A;
    margin-bottom: 0.75rem;
}

.detail-coverage-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.detail-coverage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-coverage-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.detail-coverage-list li i {
    color: #2D7D3A;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ----- Responsive ----- */
@media screen and (max-width: 768px) {
    .detail-coverage-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .detail-coverage-card {
        padding: 1.5rem 1.25rem;
    }

    .detail-coverage-card h3 {
        font-size: 1.1rem;
    }

    .detail-coverage-list li {
        font-size: 0.85rem;
        padding: 0.25rem 0;
    }
}

@media screen and (max-width: 480px) {
    .detail-coverage-section {
        padding: 2rem 0 2.5rem;
    }

    .detail-coverage-card {
        padding: 1rem 0.75rem;
    }

    .detail-coverage-icon {
        font-size: 2rem;
    }

    .detail-coverage-list li {
        font-size: 0.8rem;
    }
}


/* login.css */
/* FarmConnect - Login Page */
/* Prefix: login- */
/* Color System: Farm Green (#2D7D3A) */

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

body {
    font-family: 'Inter', sans-serif;
    background: #0A1F0E;
    min-height: 100vh;
}

/* ========== NAVBAR ========== */
.login-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 31, 14, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(45, 125, 58, 0.2);
    padding: 0.9rem 1.5rem;
}

.login-nav-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.login-logo {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFFFFF 30%, #2D7D3A 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.login-menu-toggle {
    background: transparent;
    border: 1px solid rgba(45, 125, 58, 0.4);
    color: #2D7D3A;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.login-menu-toggle:hover {
    background: rgba(45, 125, 58, 0.1);
}

.login-nav-links {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.login-nav-links.active {
    max-height: 380px;
}

.login-nav-menu {
    list-style: none;
    padding: 1.2rem 0 0.5rem 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-nav-menu li a {
    color: #F8F9FA;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s;
    display: inline-block;
}

.login-nav-menu li a:hover {
    color: #2D7D3A;
    transform: translateX(5px);
    text-decoration: underline;
    text-decoration-color: #2D7D3A;
    text-decoration-style: solid;
    text-decoration-thickness: 2.3px;
    text-underline-offset: 5px;
  
}

.login-nav-menu .home-btn-login-register a:hover {
    color: #2D7D3A;
    transform: translateX(0.3px);
    text-decoration: none;
}

@media (min-width: 768px) {
    .login-menu-toggle {
        display: none;
    }
    .login-nav-links {
        max-height: none !important;
        width: auto;
    }
    .login-nav-menu {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        padding: 0;
    }
    .login-navbar {
        padding: 1rem 2rem;
    }
}

/* ========== MAIN LOGIN CONTAINER ========== */
.login-main {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
}

.login-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.login-card {
    background: white;
    border-radius: 32px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s;
}

.login-card:hover {
    transform: translateY(-4px);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.5rem;
}

.login-accent {
    color: #2D7D3A;
}

.login-header p {
    color: #6B7280;
    font-size: 0.95rem;
}

/* ========== FORM STYLES ========== */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-input-group label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.login-input-icon {
    display: flex;
    align-items: center;
    border: 1.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
    background: #F9FAFB;
}

.login-input-icon:focus-within {
    border-color: #2D7D3A;
    box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
    background: white;
}

.login-input-icon i {
    color: #9CA3AF;
    margin-right: 12px;
    font-size: 1rem;
    transition: color 0.2s;
}

.login-input-icon:focus-within i {
    color: #2D7D3A;
}

.login-input-icon input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

.login-toggle-password {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 0 4px;
}

.login-toggle-password:hover {
    color: #2D7D3A;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.login-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4B5563;
    cursor: pointer;
}

.login-forgot {
    color: #2D7D3A;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.login-forgot:hover {
    color: #236B2E;
    text-decoration: underline;
}

.login-btn {
    background: #2D7D3A;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 40px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.5rem;
}

.login-btn:hover {
    background: #236B2E;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(45, 125, 58, 0.3);
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E5E7EB;
}

.login-footer p {
    color: #6B7280;
    font-size: 0.9rem;
}

.login-footer a {
    color: #2D7D3A;
    text-decoration: none;
    font-weight: 600;
}

.login-footer a:hover {
    text-decoration: underline;
    color: #236B2E;
}

/* ========== FOOTER ========== */
.login-footer-section {
    background: #0A1F0E;
    color: #CBD5E1;
    padding: 3rem 1rem 1rem;
}

.login-footer-logo {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFF, #2D7D3A);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}

.login-footer-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

.login-social-icons a {
    background: #1E2A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #2D7D3A;
    margin-right: 0.8rem;
    transition: all 0.2s;
    text-decoration: none;
}

.login-social-icons a:hover {
    transform: translateY(-3px);
    background: #2D7D3A;
    color: #0A1F0E;
}

.login-footer-links,
.login-footer-contact {
    list-style: none;
    padding: 0;
}

.login-footer-links li a,
.login-footer-contact li {
    text-decoration: none;
    color: #94A3B8;
    margin-bottom: 0.6rem;
    display: block;
    transition: 0.2s;
}

.login-footer-links li a:hover {
    color: #2D7D3A;
    padding-left: 5px;
}

.login-copyright {
    text-align: center;
    border-top: 1px solid #1E2A3A;
    padding-top: 2rem;
    margin-top: 2rem;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 576px) {
    .login-card {
        padding: 1.5rem;
    }
    .login-header h1 {
        font-size: 1.4rem;
    }
    .login-main {
        padding: 2rem 1rem;
    }
}


/* register.css */
/* FarmConnect - Register Page */
/* Prefix: register- */
/* Color System: Farm Green (#2D7D3A) */

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

body {
    font-family: 'Inter', sans-serif;
    background: #0A1F0E;
    min-height: 100vh;
}

/* ========== NAVBAR ========== */
.register-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 31, 14, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(45, 125, 58, 0.2);
    padding: 0.9rem 1.5rem;
}

.register-nav-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.register-logo {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFFFFF 30%, #2D7D3A 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.register-menu-toggle {
    background: transparent;
    border: 1px solid rgba(45, 125, 58, 0.4);
    color: #2D7D3A;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.register-menu-toggle:hover {
    background: rgba(45, 125, 58, 0.1);
}

.register-nav-links {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.register-nav-links.active {
    max-height: 380px;
}

.register-nav-menu {
    list-style: none;
    padding: 1.2rem 0 0.5rem 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.register-nav-menu li a {
    color: #F8F9FA;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s;
    display: inline-block;
}

.register-nav-menu li a:hover {
    color: #2D7D3A;
    transform: translateX(5px);
}

@media (min-width: 768px) {
    .register-menu-toggle {
        display: none;
    }
    .register-nav-links {
        max-height: none !important;
        width: auto;
    }
    .register-nav-menu {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        padding: 0;
    }
    .register-navbar {
        padding: 1rem 2rem;
    }
}

/* ========== MAIN REGISTER CONTAINER ========== */
.register-main {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
}

.register-container {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.register-card {
    background: white;
    border-radius: 32px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s;
}

.register-card:hover {
    transform: translateY(-4px);
}

.register-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.register-header h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.5rem;
}

.register-accent {
    color: #2D7D3A;
}

.register-header p {
    color: #6B7280;
    font-size: 0.95rem;
}

/* ========== USER TYPE TOGGLE ========== */
.register-user-type {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: #F3F4F6;
    padding: 0.5rem;
    border-radius: 60px;
}

.register-type-btn {
    flex: 1;
    padding: 0.7rem;
    border: none;
    background: transparent;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: #6B7280;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.register-type-btn i {
    font-size: 1rem;
}

.register-type-btn.active {
    background: #2D7D3A;
    color: white;
    box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.register-type-btn:hover:not(.active) {
    background: #E5E7EB;
}

/* ========== FORM STYLES ========== */
.register-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.register-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.register-input-group label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.register-input-icon {
    display: flex;
    align-items: center;
    border: 1.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
    background: #F9FAFB;
}

.register-input-icon:focus-within {
    border-color: #2D7D3A;
    box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
    background: white;
}

.register-input-icon i {
    color: #9CA3AF;
    margin-right: 12px;
    font-size: 1rem;
    transition: color 0.2s;
}

.register-input-icon:focus-within i {
    color: #2D7D3A;
}

.register-input-icon input,
.register-input-icon select {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.register-input-icon select {
    cursor: pointer;
}

.register-toggle-password {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 0 4px;
}

.register-toggle-password:hover {
    color: #2D7D3A;
}

.register-btn {
    background: #2D7D3A;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 40px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.5rem;
}

.register-btn:hover {
    background: #236B2E;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(45, 125, 58, 0.3);
}

.register-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E5E7EB;
}

.register-footer p {
    color: #6B7280;
    font-size: 0.9rem;
}

.register-footer a {
    color: #2D7D3A;
    text-decoration: none;
    font-weight: 600;
}

.register-footer a:hover {
    text-decoration: underline;
    color: #236B2E;
}

/* Error styling */
.register-error {
    color: #EF4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Field transitions */
#farmerFields,
#buyerFields,
#logisticsFields {
    transition: all 0.3s ease;
}

/* ========== FOOTER ========== */
.register-footer-section {
    background: #0A1F0E;
    color: #CBD5E1;
    padding: 3rem 1rem 1rem;
}

.register-footer-logo {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFF, #2D7D3A);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}

.register-footer-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

.register-social-icons a {
    background: #1E2A3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #2D7D3A;
    margin-right: 0.8rem;
    transition: all 0.2s;
    text-decoration: none;
}

.register-social-icons a:hover {
    transform: translateY(-3px);
    background: #2D7D3A;
    color: #0A1F0E;
}

.register-footer-links,
.register-footer-contact {
    list-style: none;
    padding: 0;
}

.register-footer-links li a,
.register-footer-contact li {
    text-decoration: none;
    color: #94A3B8;
    margin-bottom: 0.6rem;
    display: block;
    transition: 0.2s;
}

.register-footer-links li a:hover {
    color: #2D7D3A;
    padding-left: 5px;
}

.register-copyright {
    text-align: center;
    border-top: 1px solid #1E2A3A;
    padding-top: 2rem;
    margin-top: 2rem;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 576px) {
    .register-card {
        padding: 1.5rem;
    }
    .register-header h1 {
        font-size: 1.4rem;
    }
    .register-user-type {
        flex-direction: column;
        gap: 0.5rem;
        border-radius: 24px;
    }
    .register-type-btn {
        padding: 0.7rem;
        font-size: 0.8rem;
    }
    .register-main {
        padding: 2rem 1rem;
    }
}


/* ========== UNIFIED NAVBAR (Auth Style) ========== */
.home-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 31, 14, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(45, 125, 58, 0.2);
    padding: 0.9rem 1.5rem;
}

.home-nav-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.home-logo-wrapper {
    display: flex;
    align-items: center;
}

.home-logo {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FFFFFF 30%, #2D7D3A 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-logo-icon {
    color: #2D7D3A;
    font-size: 1.5rem;
}

/* Desktop Nav Links */
.home-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-nav-links li {
    margin: 0;
}

.home-nav-link {
    color: #F8F9FA;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s;
    padding: 0.5rem 0;
    position: relative;
}

.home-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #2D7D3A;
    transition: width 0.3s ease;
}

.home-nav-link:hover::after,
.home-nav-link.active::after {
    width: 100%;
}

.home-nav-link:hover {
    color: #2D7D3A;
}

.home-nav-link.active {
    color: #2D7D3A;
}

/* CTA Buttons in Nav */
.home-nav-cta-wrapper {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    
}

.home-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    display: inline-block;
}

.home-btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

.home-btn-outline-light {
    background: transparent;
    color: #F8F9FA;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.home-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #2D7D3A;
    color: #2D7D3A;
}

/* ========== HAMBURGER MENU (Mobile) ========== */
.home-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s;
}

.home-hamburger:hover {
    background: rgba(255, 255, 255, 0.05);
}

.home-hamburger-bar {
    display: block;
    width: 25px;
    height: 2.5px;
    background: #2D7D3A;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Hamburger animation to X */
.home-hamburger.active .home-hamburger-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.home-hamburger.active .home-hamburger-bar:nth-child(2) {
    opacity: 0;
}

.home-hamburger.active .home-hamburger-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .home-hamburger {
        display: flex;
    }

    .home-nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        margin-top: 1rem;
    }

    .home-nav-links.active {
        display: flex;
        animation: slideDown 0.3s ease;
    }

    .home-nav-links li {
        width: 100%;
    }

    .home-nav-link {
        display: block;
        padding: 0.6rem 0;
        width: 100%;
    }

    .home-nav-cta-wrapper {
        flex-direction: row;
        width: 100%;
        gap: 0.8rem;
        margin-top: 0.5rem;
    }

    .home-btn {
        flex: 1;
        text-align: center;
    }

    .home-logo {
        font-size: 1.4rem;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Small screens */
@media (max-width: 480px) {
    .home-navbar {
        padding: 0.7rem 1rem;
    }
    
    .home-logo {
        font-size: 1.2rem;
    }
    
    .home-logo-icon {
        font-size: 1.2rem;
    }
    
    .home-hamburger {
        padding: 0.3rem;
    }
    
    .home-hamburger-bar {
        width: 22px;
        height: 2px;
    }
}

.home-btn-login:hover {
  color: white !important;
}



/* ============================================================
   about.css · FarmConnect About Page
   Unique "about-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR (removed per instruction) ----- */

/* ----- PAGE HEADER (dark green) ----- */
.about-page-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.about-page-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.about-page-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.about-page-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ----- SECTIONS (white) ----- */
.about-section {
  padding: 4rem 0;
}

.about-section-white {
  background: #FFFFFF;
}

.about-section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
  text-align: center;
}

.about-section-subtitle {
  font-size: 1.1rem;
  color: #6B7280;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

/* ----- PROBLEM SECTION ----- */
.about-problem-card {
  background: #F7FAF7;
  padding: 2rem 1.5rem;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  text-align: center;
  transition: 0.3s ease;
  height: 100%;
}

.about-problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: rgba(45, 125, 58, 0.2);
}

.about-problem-icon {
  font-size: 2.5rem;
  color: #2D7D3A;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.about-problem-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.4rem;
}

.about-problem-card p {
  font-size: 0.95rem;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* ----- SOLUTION SECTION ----- */
.about-solution-card {
  background: #FFFFFF;
  padding: 2rem 1.5rem;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  text-align: center;
  transition: 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.about-solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: rgba(45, 125, 58, 0.2);
}

.about-solution-number {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(45, 125, 58, 0.08);
  line-height: 1;
}

.about-solution-icon {
  font-size: 2rem;
  color: #2D7D3A;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.about-solution-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.4rem;
}

.about-solution-card p {
  font-size: 0.95rem;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* ----- TRUST SECTION ----- */
.about-trust-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #F7FAF7;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  transition: 0.3s ease;
  height: 100%;
}

.about-trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: rgba(45, 125, 58, 0.2);
}

.about-trust-icon {
  font-size: 2.5rem;
  color: #2D7D3A;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.about-trust-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.4rem;
}

.about-trust-card p {
  font-size: 0.95rem;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* Statistics */
.about-stats {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid #E5E7EB;
}

.about-stat-item {
  text-align: center;
}

.about-stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #2D7D3A;
  line-height: 1.2;
}

.about-stat-label {
  display: block;
  font-size: 1rem;
  color: #6B7280;
  font-weight: 500;
}

/* ----- MISSION SECTION ----- */
.about-mission-wrapper {
  background: #F7FAF7;
  border-radius: 16px;
  padding: 3rem 2rem;
  border: 1px solid #E5E7EB;
  text-align: center;
}

.about-mission-statement {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2D7D3A;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 1rem;
}

.about-mission-text {
  font-size: 1rem;
  color: #6B7280;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ----- CTA SECTION (dark green) ----- */
.about-cta {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 4rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.about-cta-content h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: #FFFFFF;
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.about-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.about-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.about-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.about-btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

.about-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.about-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.about-btn-cta {
  padding: 0.8rem 2.4rem;
  font-size: 1.1rem;
  font-weight: 700;
}

/* ----- FOOTER ----- */
.about-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.about-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
}

.about-footer-logo-icon {
  color: #2D7D3A;
  margin-right: 0.3rem;
}

.about-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.about-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.about-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.about-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.about-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.about-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-footer-links li {
  margin-bottom: 0.4rem;
}

.about-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
  text-decoration: none;
}

.about-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.about-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.about-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.about-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.about-footer-input:focus {
  border-color: #2D7D3A;
}

.about-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 768px) {
  .about-page-header {
    padding: 3rem 1rem;
  }
  .about-section {
    padding: 2.5rem 0;
  }
  .about-mission-wrapper {
    padding: 2rem 1.5rem;
  }
  .about-stat-number {
    font-size: 2rem;
  }
  .about-cta {
    padding: 3rem 1rem;
  }
  .about-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .about-page-title {
    font-size: 1.6rem;
  }
  .about-stat-number {
    font-size: 1.6rem;
  }
  .about-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .about-cta-buttons .about-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   contact.css · FarmConnect Contact Page
   Unique "contact-" prefix · fully custom, mobile-first
   ============================================================ */

/* ----- NAVBAR (removed per instruction) ----- */

/* ----- PAGE HEADER (dark green) ----- */
.contact-page-header {
  background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(45, 125, 58, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.contact-page-header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.contact-page-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.contact-page-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ----- SECTIONS (white) ----- */
.contact-section {
  padding: 4rem 0;
}

.contact-section-white {
  background: #FFFFFF;
}

.contact-section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #111827;
  margin-bottom: 2rem;
  text-align: center;
}

/* ----- FAQ SECTION ----- */
.contact-faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.contact-faq-item {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: #FFFFFF;
  transition: 0.3s ease;
}

.contact-faq-item:hover {
  border-color: rgba(45, 125, 58, 0.2);
}

.contact-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  background: #F7FAF7;
  transition: 0.3s ease;
  user-select: none;
}

.contact-faq-question:hover {
  background: #EEF2EE;
}

.contact-faq-question h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  flex: 1;
}

.contact-faq-icon {
  font-size: 1rem;
  color: #6B7280;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.contact-faq-item.active .contact-faq-icon {
  transform: rotate(180deg);
}

.contact-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 1.5rem;
}

.contact-faq-item.active .contact-faq-answer {
  max-height: 300px;
  padding: 1rem 1.5rem 1.25rem;
}

.contact-faq-answer p {
  font-size: 0.95rem;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* ----- CONTACT INFORMATION ----- */
.contact-info-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #F7FAF7;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  transition: 0.3s ease;
  height: 100%;
}

.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: rgba(45, 125, 58, 0.2);
}

.contact-info-icon {
  font-size: 2.5rem;
  color: #2D7D3A;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.contact-info-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.4rem;
}

.contact-info-card p {
  font-size: 0.95rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

.contact-info-detail {
  font-size: 0.85rem;
  color: #9CA3AF;
  margin-top: 0.2rem;
}

/* ----- CONTACT FORM ----- */
.contact-form-wrapper {
  background: #FFFFFF;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
}

.contact-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.25rem;
}

.contact-form-subtitle {
  font-size: 0.95rem;
  color: #6B7280;
  margin-bottom: 1.5rem;
}

.contact-form-group {
  margin-bottom: 1.25rem;
}

.contact-form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 0.3rem;
}

.contact-form-input,
.contact-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  transition: 0.3s ease;
  background: #FFFFFF;
  color: #111827;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: #2D7D3A;
  box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.contact-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: 60px;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  cursor: pointer;
  background: transparent;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.contact-btn-primary {
  background: #2D7D3A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.contact-btn-primary:hover {
  background: #236B2E;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
  color: #FFFFFF;
}

.contact-btn-sm {
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
}

.contact-btn-submit {
  padding: 0.8rem 2rem;
  font-size: 1rem;
  width: 100%;
}

/* ----- MAP SECTION ----- */
.contact-map-wrapper {
  background: #FFFFFF;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  height: 100%;
}

.contact-map-container {
  border-radius: 12px;
  overflow: hidden;
  height: 400px;
}

.contact-map-container iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----- FOOTER ----- */
.contact-footer {
  background: #0D2812;
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.contact-footer-logo {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
}

.contact-footer-logo-icon {
  color: #2D7D3A;
  margin-right: 0.3rem;
}

.contact-footer-text {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.contact-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.contact-social-icons a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: 0.3s ease;
}

.contact-social-icons a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.contact-footer h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

.contact-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-footer-links li {
  margin-bottom: 0.4rem;
}

.contact-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: 0.3s ease;
  text-decoration: none;
}

.contact-footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.contact-footer-subscribe {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.contact-footer-input {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  font-size: 0.85rem;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}

.contact-footer-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-footer-input:focus {
  border-color: #2D7D3A;
}

.contact-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 768px) {
  .contact-page-header {
    padding: 3rem 1rem;
  }
  .contact-section {
    padding: 2.5rem 0;
  }
  .contact-form-wrapper {
    padding: 1.5rem;
  }
  .contact-map-wrapper {
    padding: 1.5rem;
    margin-top: 1.5rem;
  }
  .contact-map-container {
    height: 300px;
  }
  .contact-faq-question {
    padding: 1rem 1.25rem;
  }
  .contact-faq-question h3 {
    font-size: 0.9rem;
  }
  .contact-footer .row > div {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 400px) {
  .contact-page-title {
    font-size: 1.6rem;
  }
  .contact-info-card {
    padding: 1.5rem 1rem;
  }
  .contact-map-container {
    height: 250px;
  }
}




/* ============================================================
   MOBILE SEARCH BAR FIX - ONLY SHAPE CHANGE
   ============================================================ */

@media screen and (max-width: 768px) {
  .home-search-box {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border-radius: 12px;
    gap: 0.5rem;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .home-search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #F7FAF7;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    width: 100%;
  }

  .home-search-field:focus-within {
    border-color: #2D7D3A;
  }

  .home-search-icon {
    font-size: 0.85rem;
    color: #6B7280;
    flex-shrink: 0;
  }

  .home-search-input {
    border: none;
    background: transparent;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    width: 100%;
    color: #111827;
    outline: none;
    font-family: 'Inter', sans-serif;
  }

  .home-search-input::placeholder {
    color: #9CA3AF;
  }

  .home-search-select {
    border: none;
    background: transparent;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    font-weight: 400;
    color: #111827;
    outline: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: 100%;
    /* Remove ALL arrows */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
  }

  .home-search-select::-ms-expand {
    display: none !important;
  }

  .home-search-select option {
    color: #111827;
    background: #FFFFFF;
  }

  .home-btn-search {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.9rem;
    border-radius: 8px;
    justify-content: center;
    background: #2D7D3A;
    color: #FFFFFF;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
  }

  .home-btn-search:hover {
    background: #236B2E;
  }

  .home-btn-search i {
    font-size: 0.85rem;
  }

  /* Hero text stays above */
  .home-hero {
    padding: 2rem 1rem 2.5rem;
  }

  .home-hero-title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .home-hero-sub {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }

  .home-search-wrapper {
    padding: 0;
    width: 100%;
  }
}

@media screen and (max-width: 420px) {
  .home-search-box {
    padding: 0.4rem;
    border-radius: 10px;
    gap: 0.4rem;
  }

  .home-search-field {
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
  }

  .home-search-input {
    font-size: 0.85rem;
    padding: 0.3rem 0;
  }

  .home-search-select {
    font-size: 0.85rem;
    padding: 0.3rem 0;
  }

  .home-btn-search {
    padding: 0.4rem;
    font-size: 0.85rem;
    border-radius: 6px;
  }

  .home-search-icon {
    font-size: 0.8rem;
  }

  .home-btn-search i {
    font-size: 0.8rem;
  }

  .home-hero {
    padding: 1.5rem 0.75rem 2rem;
  }

  .home-hero-title {
    font-size: 1.4rem;
  }

  .home-hero-sub {
    font-size: 0.85rem;
  }
}

/* ============================================================
   MOBILE SEARCH BAR - PERFECT HERO HEIGHT
   ============================================================ */

@media screen and (max-width: 768px) {
  /* Hero section - full height with proper padding */
  .home-hero {
    padding: 4rem 2rem 6rem !important;
    min-height: auto !important;
  }

  .home-hero-title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }

  .home-hero-sub {
    font-size: 1.1rem !important;
    margin-bottom: 1.8rem !important;
    line-height: 1.5 !important;
    margin-top: 1rem !important;
  }

  .home-search-wrapper {
    padding: 0 !important;
    width: 100% !important;
  }

  /* Search box - smaller size */
  .home-search-box {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.rem !important;
    border-radius: 10px !important;
    gap: 0.4rem !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  }

  .home-search-wrapper {
    margin-top: 3rem !important;
  }

  .home-search-field {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #F7FAF7 !important;
    padding: 0.2rem 0.7rem !important;
    border-radius: 8px !important;
    border: 2px solid #E5E7EB !important;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
  }

  .home-search-field:focus-within {
    border-color: #2D7D3A !important;
  }

  .home-search-icon {
    font-size: 0.85rem !important;
    color: #6B7280 !important;
    flex-shrink: 0 !important;
  }

  .home-search-input {
    border: none !important;
    background: transparent !important;
    font-size: 0.9rem !important;
    padding: 0.2rem 0 !important;
    width: 100% !important;
    color: #111827 !important;
    outline: none !important;
    font-family: 'Inter', sans-serif !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  .home-search-input::placeholder {
    color: #9CA3AF !important;
    font-size: 0.85rem !important;
  }

  /* FIX: Select matches input design with arrow */
  .home-search-select-input {
    border: none !important;
    background: transparent !important;
    font-size: 0.9rem !important;
    padding: 0.2rem 1.8rem 0.2rem 0 !important;
    font-weight: 400 !important;
    color: #111827 !important;
    outline: none !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    /* Keep the arrow */
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    background-image: none !important;
    background-color: transparent !important;
  }

  .home-search-select-input::-ms-expand {
    display: block !important;
  }

  .home-search-select-input option {
    color: #111827 !important;
    background: #FFFFFF !important;
    font-size: 0.9rem !important;
    padding: 0.2rem 0 !important;
  }

  /* Fix the select wrapper */
  .home-search-field select {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    color: #111827 !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
  }

  /* Remove any extra spacing */
  .home-search-field:has(select) {
    padding-right: 0.7rem !important;
  }
  
  .home-btn-search {
    width: 100% !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    justify-content: center !important;
    background: #2D7D3A !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  .home-btn-search:hover {
    background: #236B2E !important;
  }

  .home-btn-search i {
    font-size: 0.85rem !important;
  }
}

@media screen and (max-width: 420px) {
  .home-hero {
    padding: 3rem 0.75rem 2.5rem !important;
  }

  .home-hero-title {
    font-size: 1.7rem !important;
  }

  .home-hero-sub {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
  }

  .home-search-box {
    padding: 0.3rem !important;
    border-radius: 8px !important;
    gap: 0.3rem !important;
  }

  .home-search-field {
    padding: 0.15rem 0.5rem !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
  }

  .home-search-input {
    font-size: 0.8rem !important;
    padding: 0.15rem 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
  }

  .home-search-input::placeholder {
    font-size: 0.75rem !important;
  }

  .home-search-select {
    font-size: 0.8rem !important;
    padding: 0.15rem 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
  }

  .home-search-select option {
    font-size: 0.8rem !important;
  }

  .home-btn-search {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
  }

  .home-search-icon {
    font-size: 0.75rem !important;
  }

  .home-btn-search i {
    font-size: 0.75rem !important;
  }
}

/* ============================================================
   BROWSE ALL PRODUCE SECTION
   ============================================================ */

.home-browse-section {
    background: linear-gradient(135deg, #F7FAF7 0%, #EEF2EE 100%);
    border-radius: 20px;
    padding: 3.5rem 2rem;
    text-align: center;
    border: 1px solid rgba(45, 125, 58, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    margin-top: -5rem;
}

.how-it-works {
  margin-top: -3rem;
}

.home-browse-section:hover {
    box-shadow: 0 8px 40px rgba(45, 125, 58, 0.06);
    transform: translateY(-2px);
}

.home-browse-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.home-browse-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #6B7280;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.home-btn-browse {
    padding: 0.8rem 2.5rem;
    font-size: 1.05rem;
    border-radius: 60px;
    gap: 0.75rem;
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(45, 125, 58, 0.25);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.home-btn-browse:hover {
    background: #236B2E;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

.home-btn-browse i:last-child {
    transition: transform 0.3s ease;
}

.home-btn-browse:hover i:last-child {
    transform: translateX(6px);
}

/* ----- RESPONSIVE ----- */
@media screen and (max-width: 768px) {
    .home-browse-section {
        margin-top: -5rem;
        padding: 2.5rem 1.5rem;
        border-radius: 16px;
    }

    .how-it-works {
      margin-top: -3rem;
    }


    .home-browse-title {
        font-size: 1.6rem;
    }

    .home-browse-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    .home-btn-browse {
        padding: 0.7rem 2rem;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }
}

@media screen and (max-width: 420px) {
    .home-browse-section {
        padding: 2rem 1rem;
        border-radius: 12px;
    }

    .home-browse-title {
        font-size: 1.3rem;
    }

    .home-browse-subtitle {
        font-size: 0.85rem;
    }

    .home-btn-browse {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }
}

/* ============================================================
   SEARCH & FILTER SECTION - MATCHING FARMERS PAGE
   ============================================================ */

.logistics-search-section {
    background: #FFFFFF;
    padding: 2.5rem 0;
    border-bottom: 1px solid #E5E7EB;
}

.logistics-search-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.logistics-search-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #F0F5F0;
    padding: 0.75rem;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.logistics-search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 160px;
    background: #FFFFFF;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    transition: 0.3s ease;
}

.logistics-search-field:focus-within {
    border-color: #2D7D3A;
    box-shadow: 0 0 0 3px rgba(45, 125, 58, 0.1);
}

.logistics-search-icon {
    color: #6B7280;
    font-size: 0.9rem;
}

.logistics-search-input {
    border: none;
    background: transparent;
    font-size: 0.95rem;
    padding: 0.6rem 0;
    width: 100%;
    font-weight: 400;
    color: #111827;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.logistics-search-input::placeholder {
    color: #9CA3AF;
}

.logistics-search-select {
    border: none;
    background: transparent;
    font-size: 0.95rem;
    padding: 0.6rem 1.8rem 0.6rem 0.2rem;
    font-weight: 400;
    color: #111827;
    appearance: none;
    outline: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.2rem center;
}

.logistics-btn-filter {
    padding: 0.6rem 2rem;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* ----- RESPONSIVE - MATCHING FARMERS PAGE ----- */
@media screen and (max-width: 992px) {
    .logistics-search-box {
        flex-direction: column;
    }
    .logistics-search-field {
        flex: 1 1 100%;
    }
    .logistics-btn-filter {
        width: 100%;
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .logistics-search-section {
        padding: 1.5rem 0;
    }
    .logistics-search-box {
        padding: 0.5rem;
        border-radius: 12px;
        gap: 0.5rem;
    }
    .logistics-search-field {
        padding: 0.15rem 0.6rem;
        border-radius: 10px;
        min-height: 36px;
    }
    .logistics-search-input {
        font-size: 0.85rem;
        padding: 0.4rem 0;
        min-height: 28px;
    }
    .logistics-search-input::placeholder {
        font-size: 0.8rem;
    }
    .logistics-search-select {
        font-size: 0.85rem;
        padding: 0.4rem 1.6rem 0.4rem 0.2rem;
        min-height: 28px;
    }
    .logistics-btn-filter {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        min-height: 38px;
    }
    .logistics-search-icon {
        font-size: 0.8rem;
    }
    .login-container {
      margin-top: -5rem;
    }
}

@media screen and (max-width: 420px) {
    .logistics-search-section {
        padding: 1rem 0;
    }
    .logistics-search-box {
        padding: 0.4rem;
        border-radius: 10px;
        gap: 0.4rem;
    }
    .logistics-search-field {
        padding: 0.1rem 0.5rem;
        border-radius: 8px;
        min-height: 32px;
    }
    .logistics-search-input {
        font-size: 0.78rem;
        padding: 0.3rem 0;
        min-height: 24px;
    }
    .logistics-search-input::placeholder {
        font-size: 0.75rem;
    }
    .logistics-search-select {
        font-size: 0.78rem;
        padding: 0.3rem 1.4rem 0.3rem 0.2rem;
        min-height: 24px;
    }
    .logistics-btn-filter {
        padding: 0.4rem 0.8rem;
        font-size: 0.78rem;
        min-height: 32px;
        border-radius: 8px;
    }
    .logistics-search-icon {
        font-size: 0.75rem;
    }
}

.marketplace-empty-state {
    display: none !important;
}

.marketplace-empty-state.show {
    display: block;
}

/* Hide empty state by default */
.farmers-empty-state {
    display: none !important;
}

.farmers-empty-state.show {
    display: block;
}

/* Add this to your main.css */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Fix Bootstrap row margins - this is usually the culprit */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Adjust column padding to maintain spacing */
[class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Make sure containers don't overflow */
.container,
.container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
}

/* Fix any element that might be wider than viewport */
img,
video,
iframe,
table,
[style*="width: 100vw"],
[style*="width: 100%"] {
    max-width: 100% !important;
}

/* Hide horizontal scrollbar but keep content visible */
body {
    overflow-x: hidden !important;
}

/* Ensure all wrapper elements don't overflow */
/* [class*="-wrapper"],
[class*="-container"],
[class*="-box"] {
    max-width: 100% !important;
    overflow: hidden !important;
} */

/* ============================================================
   CTA SECTION - MARKETPLACE, FARMERS, LOGISTICS PAGES
   ============================================================ */

/* ----- General CTA Section Styles ----- */
.marketplace-cta-section,
.farmers-cta-section,
.logistics-cta-section {
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
    padding: 4rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.marketplace-cta-wrapper,
.farmers-cta-wrapper,
.logistics-cta-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.marketplace-cta-title,
.farmers-cta-title,
.logistics-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.marketplace-cta-buttons,
.farmers-cta-buttons,
.logistics-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ----- CTA Buttons ----- */
.marketplace-cta-btn,
.farmers-cta-btn,
.logistics-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 2rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
    cursor: pointer;
}

/* Primary Button */
.marketplace-cta-btn-primary,
.farmers-cta-btn-primary,
.logistics-cta-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(45, 125, 58, 0.25);
}

.marketplace-cta-btn-primary:hover,
.farmers-cta-btn-primary:hover,
.logistics-cta-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

/* Outline Button */
.marketplace-cta-btn-outline,
.farmers-cta-btn-outline,
.logistics-cta-btn-outline {
    background: transparent;
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.marketplace-cta-btn-outline:hover,
.farmers-cta-btn-outline:hover,
.logistics-cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    color: #FFFFFF;
}

/* Button Icons */
.marketplace-cta-btn i,
.farmers-cta-btn i,
.logistics-cta-btn i {
    font-size: 1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 992px) {
    .marketplace-cta-btn,
    .farmers-cta-btn,
    .logistics-cta-btn {
        min-width: 160px;
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 768px) {
    .marketplace-cta-section,
    .farmers-cta-section,
    .logistics-cta-section {
        padding: 3rem 1rem;
    }

    .marketplace-cta-title,
    .farmers-cta-title,
    .logistics-cta-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .marketplace-cta-buttons,
    .farmers-cta-buttons,
    .logistics-cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .marketplace-cta-btn,
    .farmers-cta-btn,
    .logistics-cta-btn {
        width: 100%;
        max-width: 320px;
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
        min-width: unset;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .marketplace-cta-section,
    .farmers-cta-section,
    .logistics-cta-section {
        padding: 2.5rem 0.75rem;
    }

    .marketplace-cta-title,
    .farmers-cta-title,
    .logistics-cta-title {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }

    .marketplace-cta-btn,
    .farmers-cta-btn,
    .logistics-cta-btn {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
        max-width: 100%;
    }

    .marketplace-cta-btn i,
    .farmers-cta-btn i,
    .logistics-cta-btn i {
        font-size: 0.85rem;
    }
}

/* ============================================================
   HOME CTA SECTION
   ============================================================ */

.home-cta-section {
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
    padding: 4rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.home-cta-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.home-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.home-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ----- CTA Buttons ----- */
.home-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 2rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
    cursor: pointer;
    white-space: nowrap;
}

/* Primary Button */
.home-cta-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(45, 125, 58, 0.25);
}

.home-cta-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

/* Outline Button */
.home-cta-btn-outline {
    background: transparent;
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.home-cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    color: #FFFFFF;
}

/* Button Icons */
.home-cta-btn i {
    font-size: 1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 992px) {
    .home-cta-btn {
        min-width: 160px;
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 768px) {
    .home-cta-section {
        padding: 3rem 1rem;
    }

    .home-cta-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .home-cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .home-cta-btn {
        width: 100%;
        max-width: 100%;
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
        min-width: unset;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .home-cta-section {
        padding: 2.5rem 0.75rem;
    }

    .home-cta-title {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }

    .home-cta-btn {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
    }

    .home-cta-btn i {
        font-size: 0.85rem;
    }
}

/* ============================================================
   MARKETPLACE CARDS - MATCHING SIMILAR PRODUCTS
   ============================================================ */

/* Card Category */
.marketplace-card-category {
    font-size: 0.7rem;
    color: #6B7280;
    margin-bottom: 0.4rem;
    display: block;
}

.marketplace-card-category i {
    color: #2D7D3A;
    margin-right: 0.2rem;
}

/* Card Rating - Match similar products */
.marketplace-card-rating {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #F59E0B;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.marketplace-card-rating span {
    color: #6B7280;
    font-weight: 500;
}

/* Grid spacing */
.marketplace-card-grid {
    margin-top: 0.5rem;
}

/* Responsive - 2 columns on mobile, 4 on desktop */
@media screen and (max-width: 576px) {
    .marketplace-card-grid .col-6 {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
    .marketplace-card-grid .col-md-4 {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media screen and (min-width: 769px) {
    .marketplace-card-grid .col-lg-3 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Card hover effects */
.marketplace-card {
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.marketplace-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45, 125, 58, 0.08);
    border-color: rgba(45, 125, 58, 0.2);
}

/* Image height consistency */
.marketplace-card-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #F0F5F0;
    flex-shrink: 0;
}

/* Body padding */
.marketplace-card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Name */
.marketplace-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.2rem;
}

/* Seller & Location */
.marketplace-card-seller {
    font-size: 0.8rem;
    color: #6B7280;
    margin: 0 0 0.2rem;
}

.marketplace-card-location {
    font-size: 0.75rem;
    color: #6B7280;
    margin: 0 0 0.4rem;
}

/* Footer */
.marketplace-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.marketplace-card-price {
    font-weight: 700;
    font-size: 1rem;
    color: #2D7D3A;
}

.marketplace-card-status {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 60px;
    text-transform: uppercase;
}

.marketplace-status-available {
    background: #DFF0E0;
    color: #236B2E;
}

.marketplace-status-low {
    background: #FEF3C7;
    color: #B45309;
}

.marketplace-status-sold {
    background: #FEE2E2;
    color: #DC2626;
}

/* View Details Button */
.marketplace-btn-view {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

/* Responsive image heights */
@media screen and (max-width: 480px) {
    .marketplace-card-img {
        height: 140px;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .marketplace-card-img {
        height: 160px;
    }
}

@media screen and (min-width: 769px) {
    .marketplace-card-img {
        height: 180px;
    }
}

/* ============================================================
   FEATURED LISTINGS - HOME PAGE
   ============================================================ */

.home-featured-section {
    background: #FFFFFF;
    padding: 3rem 0 4rem;
}

.home-featured-header {
    text-align: center;
    margin-bottom: 2rem;
}

.home-featured-header .home-section-title {
    margin-bottom: 0.25rem;
}

.home-featured-header .home-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #2D7D3A;
    border-radius: 4px;
    margin: 0.5rem auto 0;
}

.home-featured-count {
    font-size: 0.95rem;
    color: #6B7280;
    font-weight: 500;
    display: inline-block;
    background: #F0F5F0;
    padding: 0.2rem 1.2rem;
    border-radius: 60px;
    letter-spacing: 0.02em;
}

.home-featured-grid {
    margin-top: 0.5rem;
}

/* Featured Card */
.home-featured-card {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.home-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45, 125, 58, 0.08);
    border-color: rgba(45, 125, 58, 0.2);
}

/* Featured Badge */
.home-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #2D7D3A;
    color: #FFFFFF;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 60px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 2px 8px rgba(45, 125, 58, 0.3);
}

.home-featured-badge i {
    font-size: 0.5rem;
}

/* Card Image */
.home-featured-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #F0F5F0;
    flex-shrink: 0;
}

/* Card Body */
.home-featured-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.home-featured-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.2rem;
}

.home-featured-seller {
    font-size: 0.8rem;
    color: #6B7280;
    margin: 0 0 0.2rem;
}

.home-featured-trust-badge {
    color: #2D7D3A;
    margin-right: 0.2rem;
}

.home-featured-location {
    font-size: 0.75rem;
    color: #6B7280;
    margin: 0 0 0.4rem;
}

.home-featured-location i {
    margin-right: 0.2rem;
}

.home-featured-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.home-featured-price {
    font-weight: 700;
    font-size: 1rem;
    color: #2D7D3A;
}

.home-featured-status {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 60px;
    text-transform: uppercase;
}

.home-featured-rating {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #F59E0B;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.home-featured-rating span {
    color: #6B7280;
    font-weight: 500;
}

.home-featured-category {
    font-size: 0.7rem;
    color: #6B7280;
    margin-bottom: 0.4rem;
}

.home-featured-category i {
    color: #2D7D3A;
    margin-right: 0.2rem;
}

/* View Details Button */
.home-featured-btn-view {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

.home-featured-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    border-radius: 60px;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    transition: 0.25s ease;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.home-featured-btn-outline {
    border: 1.5px solid #2D7D3A;
    color: #2D7D3A;
    background: transparent;
}

.home-featured-btn-outline:hover {
    background: #2D7D3A;
    color: #FFFFFF;
}

.home-featured-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(45, 125, 58, 0.3);
}

.home-featured-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

/* Show More Button Container */
.home-featured-show-more {
    text-align: center;
    margin-top: 2.5rem;
}

.home-featured-show-more .home-featured-btn-primary {
    padding: 0.7rem 2.5rem;
    font-size: 0.95rem;
    gap: 0.6rem;
}

/* ============================================================
   RESPONSIVE - FEATURED LISTINGS
   ============================================================ */

@media screen and (max-width: 768px) {
    .home-featured-section {
        padding: 2rem 0 3rem;
    }

    .home-featured-header {
        margin-bottom: 1.5rem;
    }

    .home-featured-img {
        height: 140px;
    }

    .home-featured-name {
        font-size: 0.85rem;
    }

    .home-featured-price {
        font-size: 0.9rem;
    }

    .home-featured-show-more .home-featured-btn-primary {
        padding: 0.6rem 2rem;
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
    }

    .home-featured-badge {
        font-size: 0.5rem;
        padding: 0.2rem 0.5rem;
        top: 8px;
        left: 8px;
    }

    .home-featured-count {
        font-size: 0.8rem;
        padding: 0.15rem 1rem;
    }
}

@media screen and (max-width: 480px) {
    .home-featured-img {
        height: 120px;
    }

    .home-featured-body {
        padding: 0.75rem;
    }

    .home-featured-name {
        font-size: 0.8rem;
    }

    .home-featured-price {
        font-size: 0.85rem;
    }

    .home-featured-seller,
    .home-featured-location {
        font-size: 0.7rem;
    }

    .home-featured-rating {
        font-size: 0.7rem;
    }

    .home-featured-btn-view {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }

    .home-featured-badge {
        font-size: 0.45rem;
        padding: 0.15rem 0.4rem;
        top: 6px;
        left: 6px;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .home-featured-img {
        height: 160px;
    }
}

/* ============================================================
   ABOUT PAGE CTA SECTION
   ============================================================ */

.about-cta-section {
    background: linear-gradient(135deg, #0A1F0E 0%, #0D2E14 100%);
    padding: 4rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.about-cta-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.about-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.about-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ----- CTA Buttons ----- */
.about-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 2rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
    cursor: pointer;
    white-space: nowrap;
}

/* Primary Button */
.about-cta-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(45, 125, 58, 0.25);
}

.about-cta-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 125, 58, 0.35);
    color: #FFFFFF;
}

/* Outline Button */
.about-cta-btn-outline {
    background: transparent;
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.about-cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    color: #FFFFFF;
}

/* Button Icons */
.about-cta-btn i {
    font-size: 1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 992px) {
    .about-cta-btn {
        min-width: 160px;
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 768px) {
    .about-cta-section {
        padding: 3rem 1rem;
    }

    .about-cta-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .about-cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .about-cta-btn {
        width: 100%;
        max-width: 100%;
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
        min-width: unset;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .about-cta-section {
        padding: 2.5rem 0.75rem;
    }

    .about-cta-title {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }

    .about-cta-btn {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
    }

    .about-cta-btn i {
        font-size: 0.85rem;
    }
}

/* ============================================================
   FEATURED BADGE - MARKETPLACE CARDS
   ============================================================ */

.marketplace-card {
    position: relative;
}

.marketplace-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #2D7D3A;
    color: #FFFFFF;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 60px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 8px rgba(45, 125, 58, 0.3);
}

.marketplace-featured-badge i {
    font-size: 0.45rem;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .marketplace-featured-badge {
        font-size: 0.45rem;
        padding: 0.15rem 0.4rem;
        top: 6px;
        left: 6px;
    }
    
    .marketplace-featured-badge i {
        font-size: 0.4rem;
    }
}


/* ============================================================
   farmer-dashboard.css · FarmConnect Farmer Dashboard
   ============================================================ */

:root {
    --farmer-sidebar-width: 260px;
    --farmer-sidebar-collapsed: 72px;
    --farmer-bg: #F0F5F0;
    --farmer-card-bg: #FFFFFF;
    --farmer-text: #111827;
    --farmer-text-secondary: #6B7280;
    --farmer-border: #E5E7EB;
    --farmer-shadow: 0 4px 16px rgba(0,0,0,0.04);
    --farmer-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- DARK MODE ----- */
.farmer-dark-mode {
    --farmer-bg: #0A1A0E;
    --farmer-card-bg: #0D2812;
    --farmer-text: #F8F9FA;
    --farmer-text-secondary: #9CA3AF;
    --farmer-border: #1A3A22;
    --farmer-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.farmer-dark-mode .farmer-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.farmer-dark-mode .farmer-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.farmer-dark-mode .farmer-stat-card,
.farmer-dark-mode .farmer-modal,
.farmer-dark-mode .farmer-settings-card,
.farmer-dark-mode .farmer-preview-card,
.farmer-dark-mode .farmer-preview-product,
.farmer-dark-mode .farmer-enquiry-item,
.farmer-dark-mode .farmer-review-card,
.farmer-dark-mode .farmer-notification-item {
    background: #0D2812;
    border-color: #1A3A22;
    color: #F8F9FA;
}

.farmer-dark-mode .farmer-form-input,
.farmer-dark-mode .farmer-form-textarea {
    background: #1A3A22;
    border-color: #2A4F34;
    color: #F8F9FA;
}

.farmer-dark-mode .farmer-form-input:focus,
.farmer-dark-mode .farmer-form-textarea:focus {
    border-color: #2D7D3A;
}

.farmer-dark-mode .farmer-modal-overlay {
    background: rgba(0,0,0,0.8);
}

.farmer-dark-mode .farmer-image-preview {
    border-color: #1A3A22;
    background: #1A3A22;
}

.farmer-dark-mode .farmer-toggle-slider {
    background: #1A3A22;
}

/* ----- SIDEBAR ----- */
.farmer-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--farmer-sidebar-width);
    background: #0A1F0E;
    border-right: 1px solid rgba(255,255,255,0.04);
    z-index: 1000;
    transition: width var(--farmer-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.farmer-sidebar.collapsed {
    width: var(--farmer-sidebar-collapsed);
}

.farmer-sidebar.collapsed .farmer-sidebar-brand,
.farmer-sidebar.collapsed .farmer-sidebar-link span {
    display: none;
}

.farmer-sidebar.collapsed .farmer-sidebar-link {
    justify-content: center;
    padding: 0.75rem;
}

.farmer-sidebar.collapsed .farmer-sidebar-link i {
    margin: 0;
    font-size: 1.4rem;
}

.farmer-sidebar-header {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.farmer-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.farmer-sidebar-logo-icon {
    color: #2D7D3A;
    font-size: 1.5rem;
}

.farmer-sidebar-collapse {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--farmer-transition);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.farmer-sidebar.collapsed .farmer-sidebar-collapse i {
    transform: rotate(180deg);
}

.farmer-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    scrollbar-width: none;
}

.farmer-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.farmer-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: all var(--farmer-transition);
    margin-bottom: 0.15rem;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
}

.farmer-sidebar.collapsed .farmer-sidebar-link {
    padding: 0.7rem;
    justify-content: center;
}

.farmer-sidebar.collapsed .farmer-sidebar-link span {
    display: none;
}

.farmer-sidebar.collapsed .farmer-sidebar-link i {
    margin: 0;
    font-size: 1.3rem;
}

.farmer-sidebar-link i {
    width: 1.3rem;
    text-align: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.farmer-sidebar-link:hover {
    background: rgba(45,125,58,0.15);
    color: #FFFFFF;
}

.farmer-sidebar-link.active {
    background: rgba(45,125,58,0.2);
    color: #2D7D3A;
}

.farmer-sidebar-logout {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 0.75rem;
    color: rgba(255,255,255,0.4);
}

.farmer-sidebar-logout:hover {
    color: #EF4444;
}

/* ----- MAIN CONTENT ----- */
.farmer-main {
    margin-left: var(--farmer-sidebar-width);
    min-height: 100vh;
    background: var(--farmer-bg);
    transition: margin-left var(--farmer-transition);
}

.farmer-sidebar.collapsed ~ .farmer-main {
    margin-left: var(--farmer-sidebar-collapsed);
}

/* ----- NAVBAR ----- */
.farmer-navbar {
    background: #0D2812;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 0.5rem;
    min-height: 64px;
}

.farmer-navbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.farmer-navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.farmer-navbar-toggle i {
    transition: transform 0.3s ease;
}

.farmer-navbar-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

.farmer-navbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.farmer-search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border-radius: 60px;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.04);
    transition: var(--farmer-transition);
    min-width: 200px;
    flex-shrink: 1;
}

.farmer-search-wrapper:focus-within {
    border-color: rgba(45,125,58,0.5);
    background: rgba(255,255,255,0.08);
}

.farmer-search-icon {
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

.farmer-search-input {
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.farmer-search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.farmer-navbar-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.04);
    color: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--farmer-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 1rem;
    flex-shrink: 0;
}

.farmer-navbar-btn:hover {
    background: rgba(255,255,255,0.1);
}

.farmer-notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    border: 2px solid #0D2812;
    display: none;
}

/* ----- PROFILE DROPDOWN ----- */
.farmer-profile-dropdown {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.farmer-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 60px;
    transition: all 0.3s ease;
}

.farmer-profile-trigger:hover {
    background: rgba(255,255,255,0.05);
}

.farmer-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2D7D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
}

.farmer-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.farmer-profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.farmer-profile-name {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.85rem;
}

.farmer-profile-role {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
}

.farmer-profile-arrow {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    margin-left: 0.2rem;
}

.farmer-profile-dropdown.active .farmer-profile-arrow {
    transform: rotate(180deg);
}

.farmer-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--farmer-card-bg);
    border-radius: 12px;
    border: 1px solid var(--farmer-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.farmer-profile-dropdown.active .farmer-profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.farmer-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: var(--farmer-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.farmer-profile-menu-item:hover {
    background: rgba(45,125,58,0.08);
    color: #2D7D3A;
}

.farmer-profile-menu-item i {
    width: 1.2rem;
    text-align: center;
    font-size: 1rem;
    color: var(--farmer-text-secondary);
}

.farmer-profile-menu-item:hover i {
    color: #2D7D3A;
}

.farmer-profile-menu-divider {
    height: 1px;
    background: var(--farmer-border);
    margin: 0.3rem 0.5rem;
}

.farmer-profile-menu-logout {
    color: #EF4444;
}

.farmer-profile-menu-logout:hover {
    background: rgba(239,68,68,0.08);
    color: #EF4444;
}

/* ----- CONTENT ----- */
.farmer-content {
    padding: 1.5rem;
}

.farmer-section {
    display: none;
    animation: farmerFadeIn 0.4s ease;
}

.farmer-section.active {
    display: block;
}

@keyframes farmerFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- WELCOME ----- */
.farmer-welcome h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--farmer-text);
    margin-bottom: 0.2rem;
}

.farmer-welcome p {
    color: var(--farmer-text-secondary);
    margin-bottom: 1.5rem;
}

/* ----- PROFILE COMPLETION ----- */
.farmer-profile-completion {
    background: var(--farmer-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    margin-bottom: 1.5rem;
}

.farmer-completion-bar {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--farmer-text);
    margin-bottom: 0.3rem;
}

.farmer-progress-track {
    height: 8px;
    background: var(--farmer-border);
    border-radius: 60px;
    overflow: hidden;
}

.farmer-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2D7D3A, #236B2E);
    border-radius: 60px;
    transition: width 0.6s ease;
}

/* ----- STATS ----- */
.farmer-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.farmer-stat-card {
    background: var(--farmer-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--farmer-transition);
}

.farmer-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45,125,58,0.08);
}

.farmer-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(45,125,58,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #2D7D3A;
    flex-shrink: 0;
}

.farmer-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--farmer-text);
    line-height: 1.1;
}

.farmer-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--farmer-text-secondary);
    font-weight: 500;
}

/* ----- ACTIVITY ----- */
.farmer-recent-activity {
    background: var(--farmer-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    margin-bottom: 1.5rem;
}

.farmer-recent-activity h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--farmer-text);
    margin-bottom: 0.75rem;
}

.farmer-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.farmer-activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--farmer-text);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--farmer-border);
}

.farmer-activity-item:last-child {
    border-bottom: none;
}

.farmer-activity-item i {
    width: 1.2rem;
    text-align: center;
}

.farmer-activity-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--farmer-text-secondary);
}

/* ----- QUICK ACTIONS ----- */
.farmer-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ----- BUTTONS ----- */
.farmer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    border-radius: 60px;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    transition: var(--farmer-transition);
    cursor: pointer;
    background: transparent;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.farmer-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(45,125,58,0.3);
}

.farmer-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45,125,58,0.35);
    color: #FFFFFF;
}

.farmer-btn-outline {
    border: 1.5px solid var(--farmer-border);
    color: var(--farmer-text);
}

.farmer-btn-outline:hover {
    border-color: #2D7D3A;
    color: #2D7D3A;
}

.farmer-btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

/* ----- FORM ----- */
.farmer-form-group {
    margin-bottom: 1rem;
}

.farmer-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--farmer-text);
    margin-bottom: 0.3rem;
}

.farmer-form-private {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--farmer-text-secondary);
}

.farmer-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.farmer-form-input,
.farmer-form-textarea {
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--farmer-border);
    background: var(--farmer-bg);
    color: var(--farmer-text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: var(--farmer-transition);
    outline: none;
}

.farmer-form-input:focus,
.farmer-form-textarea:focus {
    border-color: #2D7D3A;
    box-shadow: 0 0 0 3px rgba(45,125,58,0.1);
}

.farmer-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.farmer-form-divider {
    height: 1px;
    background: var(--farmer-border);
    margin: 1.5rem 0;
}

.farmer-form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* ----- IMAGE UPLOAD ----- */
.farmer-image-upload {
    cursor: pointer;
}

.farmer-image-preview {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--farmer-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--farmer-text-secondary);
    transition: var(--farmer-transition);
    background: var(--farmer-bg);
    overflow: hidden;
}

.farmer-image-preview:hover {
    border-color: #2D7D3A;
}

.farmer-image-preview i {
    font-size: 2rem;
    margin-bottom: 0.3rem;
    color: #2D7D3A;
}

.farmer-image-preview span {
    font-size: 0.7rem;
}

.farmer-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- PROFILE PREVIEW ----- */
.farmer-profile-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.farmer-profile-preview-wrapper h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--farmer-text);
    margin-bottom: 1rem;
}

.farmer-preview-card {
    background: var(--farmer-card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    position: sticky;
    top: 80px;
}

.farmer-preview-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.farmer-preview-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #2D7D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
}

.farmer-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.farmer-preview-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--farmer-text);
    margin: 0 0 0.2rem;
}

.farmer-preview-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 60px;
    background: #DFF0E0;
    color: #236B2E;
    margin-bottom: 0.3rem;
}

.farmer-preview-badge i {
    margin-right: 0.2rem;
}

.farmer-preview-info p {
    font-size: 0.85rem;
    color: var(--farmer-text-secondary);
    margin: 0.1rem 0;
}

.farmer-preview-info p i {
    margin-right: 0.3rem;
    color: #2D7D3A;
}

.farmer-preview-rating {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #F59E0B;
    font-size: 0.85rem;
    margin: 0.3rem 0;
}

.farmer-preview-rating span {
    color: var(--farmer-text-secondary);
}

.farmer-preview-bio {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--farmer-text);
    line-height: 1.5;
}

/* ----- PRODUCTS GRID ----- */
.farmer-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.farmer-product-card {
    background: var(--farmer-card-bg);
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    overflow: hidden;
    transition: var(--farmer-transition);
}

.farmer-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45,125,58,0.08);
}

.farmer-product-image {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #F0F5F0;
    position: relative;
}

.farmer-product-body {
    padding: 1rem;
}

.farmer-product-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--farmer-text);
    margin: 0 0 0.2rem;
}

.farmer-product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--farmer-text-secondary);
}

.farmer-product-price {
    font-weight: 700;
    color: #2D7D3A;
    font-size: 0.9rem;
}

.farmer-product-status {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 60px;
}

.farmer-product-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.farmer-product-actions .farmer-btn {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* ----- TABLE HEADER ----- */
.farmer-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.farmer-table-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--farmer-text);
    margin: 0;
}

.farmer-table-search {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--farmer-border);
    background: var(--farmer-card-bg);
    color: var(--farmer-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
}

.farmer-table-search:focus {
    border-color: #2D7D3A;
}

.farmer-filter-select {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--farmer-border);
    background: var(--farmer-card-bg);
    color: var(--farmer-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}

/* ----- ADD PRODUCT ----- */
.farmer-add-product-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.farmer-preview-product {
    background: var(--farmer-card-bg);
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.farmer-preview-product-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #F0F5F0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.farmer-preview-product-placeholder {
    color: var(--farmer-text-secondary);
    font-size: 0.9rem;
}

.farmer-preview-product-placeholder i {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.3rem;
}

.farmer-preview-product-body {
    padding: 1.25rem;
}

.farmer-preview-product-body h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--farmer-text);
    margin: 0 0 0.2rem;
}

.farmer-preview-product-seller {
    font-size: 0.85rem;
    color: var(--farmer-text-secondary);
    margin: 0 0 0.2rem;
}

.farmer-preview-product-location {
    font-size: 0.8rem;
    color: var(--farmer-text-secondary);
    margin: 0 0 0.4rem;
}

.farmer-preview-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.farmer-preview-product-price {
    font-weight: 700;
    font-size: 1.2rem;
    color: #2D7D3A;
}

.farmer-preview-product-status {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 60px;
}

.farmer-preview-product-rating {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #F59E0B;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.farmer-preview-product-rating span {
    color: var(--farmer-text-secondary);
}

.farmer-preview-product-category {
    font-size: 0.7rem;
    color: var(--farmer-text-secondary);
    display: block;
    margin-bottom: 0.2rem;
}

.farmer-preview-product-category i {
    color: #2D7D3A;
    margin-right: 0.2rem;
}

.farmer-preview-product-desc {
    font-size: 0.85rem;
    color: var(--farmer-text-secondary);
    margin-bottom: 0.5rem;
}

.farmer-preview-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.farmer-preview-spec {
    background: var(--farmer-bg);
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--farmer-text);
}

.farmer-preview-spec span:first-child {
    color: var(--farmer-text-secondary);
}

.farmer-preview-product-verified {
    font-size: 0.75rem;
    font-weight: 600;
    color: #236B2E;
}

.farmer-preview-product-verified i {
    margin-right: 0.2rem;
}

/* ----- ENQUIRIES ----- */
.farmer-enquiries-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.farmer-enquiry-item {
    background: var(--farmer-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.farmer-enquiry-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--farmer-text);
    margin: 0;
}

.farmer-enquiry-info p {
    font-size: 0.85rem;
    color: var(--farmer-text-secondary);
    margin: 0.1rem 0;
}

.farmer-enquiry-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 60px;
}

.farmer-enquiry-status-new {
    background: #DBEAFE;
    color: #2563EB;
}

.farmer-enquiry-status-contacted {
    background: #FEF3C7;
    color: #B45309;
}

.farmer-enquiry-status-closed {
    background: #DFF0E0;
    color: #236B2E;
}

.farmer-enquiry-actions {
    display: flex;
    gap: 0.4rem;
}

/* ----- REVIEWS ----- */
.farmer-reviews-summary {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    background: var(--farmer-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
}

.farmer-review-stat {
    text-align: center;
}

.farmer-review-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #2D7D3A;
}

.farmer-review-stat span:last-child {
    font-size: 0.85rem;
    color: var(--farmer-text-secondary);
}

.farmer-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.farmer-review-card {
    background: var(--farmer-card-bg);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
}

.farmer-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.farmer-review-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--farmer-text);
}

.farmer-review-stars {
    color: #F59E0B;
    font-size: 0.85rem;
}

.farmer-review-text {
    font-size: 0.9rem;
    color: var(--farmer-text);
    margin-bottom: 0.3rem;
}

.farmer-review-date {
    font-size: 0.75rem;
    color: var(--farmer-text-secondary);
}

.farmer-review-response {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--farmer-bg);
    border-radius: 8px;
    border-left: 3px solid #2D7D3A;
}

.farmer-review-response-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--farmer-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.farmer-review-response-text {
    font-size: 0.85rem;
    color: var(--farmer-text);
    margin: 0.1rem 0 0;
}

/* ----- NOTIFICATIONS ----- */
.farmer-notifications-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.farmer-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.farmer-notification-item {
    background: var(--farmer-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--farmer-transition);
}

.farmer-notification-item:hover {
    border-color: rgba(45,125,58,0.2);
}

.farmer-notification-item.unread {
    border-left: 3px solid #2D7D3A;
    background: rgba(45,125,58,0.02);
}

.farmer-notification-content {
    flex: 1;
}

.farmer-notification-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--farmer-text);
}

.farmer-notification-message {
    font-size: 0.85rem;
    color: var(--farmer-text-secondary);
    margin: 0.1rem 0;
}

.farmer-notification-time {
    font-size: 0.7rem;
    color: var(--farmer-text-secondary);
}

.farmer-notification-actions {
    display: flex;
    gap: 0.4rem;
}

/* ----- SETTINGS ----- */
.farmer-settings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.farmer-settings-card {
    background: var(--farmer-card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--farmer-border);
    box-shadow: var(--farmer-shadow);
}

.farmer-settings-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--farmer-text);
    margin-bottom: 1rem;
}

.farmer-password-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.farmer-settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--farmer-border);
}

.farmer-settings-toggle:last-child {
    border-bottom: none;
}

.farmer-settings-toggle span {
    font-size: 0.9rem;
    color: var(--farmer-text);
}

/* ----- TOGGLE ----- */
.farmer-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.farmer-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.farmer-toggle-slider {
    position: absolute;
    inset: 0;
    background: #9CA3AF;
    border-radius: 60px;
    transition: 0.3s ease;
}

.farmer-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: 0.3s ease;
}

.farmer-toggle input:checked + .farmer-toggle-slider {
    background: #2D7D3A;
}

.farmer-toggle input:checked + .farmer-toggle-slider::before {
    transform: translateX(20px);
}

/* ----- MODAL ----- */
.farmer-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.farmer-modal-overlay.active {
    display: flex;
}

.farmer-modal {
    background: var(--farmer-card-bg);
    border-radius: 20px;
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    animation: farmerModalIn 0.3s ease;
}

@keyframes farmerModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.farmer-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--farmer-border);
}

.farmer-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--farmer-text);
    margin: 0;
}

.farmer-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--farmer-text-secondary);
    cursor: pointer;
    transition: var(--farmer-transition);
    line-height: 1;
}

.farmer-modal-close:hover {
    color: var(--farmer-text);
    transform: rotate(90deg);
}

.farmer-modal-body {
    padding: 1.5rem;
    color: var(--farmer-text);
}

.farmer-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--farmer-border);
    justify-content: flex-end;
}

/* ----- TOAST ----- */
.farmer-toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    width: 100%;
}

.farmer-toast {
    background: var(--farmer-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--farmer-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: toastIn 0.4s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.farmer-toast-success {
    border-left: 4px solid #10B981;
}

.farmer-toast-error {
    border-left: 4px solid #EF4444;
}

.farmer-toast-info {
    border-left: 4px solid #3B82F6;
}

.farmer-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.farmer-toast-success .farmer-toast-icon {
    color: #10B981;
}

.farmer-toast-error .farmer-toast-icon {
    color: #EF4444;
}

.farmer-toast-info .farmer-toast-icon {
    color: #3B82F6;
}

.farmer-toast-content {
    flex: 1;
}

.farmer-toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--farmer-text);
}

.farmer-toast-message {
    font-size: 0.85rem;
    color: var(--farmer-text-secondary);
}

.farmer-toast-close {
    background: none;
    border: none;
    color: var(--farmer-text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 992px) {
    .farmer-sidebar {
        transform: translateX(-100%);
        width: var(--farmer-sidebar-width);
        transition: transform var(--farmer-transition);
    }

    .farmer-sidebar.mobile-open {
        transform: translateX(0);
    }

    .farmer-main {
        margin-left: 0 !important;
    }

    .farmer-navbar-toggle {
        display: block;
    }

    .farmer-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .farmer-profile-container,
    .farmer-add-product-container,
    .farmer-settings-container {
        grid-template-columns: 1fr;
    }

    .farmer-preview-card,
    .farmer-preview-product {
        position: relative;
        top: 0;
    }
}

@media screen and (max-width: 768px) {
    .farmer-navbar {
        padding: 0.5rem 0.75rem;
        gap: 0.3rem;
    }

    .farmer-navbar-title {
        font-size: 0.9rem;
    }

    .farmer-navbar-right {
        gap: 0.3rem;
    }

    .farmer-search-wrapper {
        min-width: 100px;
        flex: 1;
        max-width: 150px;
    }

    .farmer-search-input {
        font-size: 0.75rem;
        padding: 0.3rem 0.3rem;
    }

    .farmer-navbar-btn {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .farmer-profile-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .farmer-profile-info {
        display: none;
    }

    .farmer-profile-arrow {
        display: none;
    }

    .farmer-content {
        padding: 0.75rem;
    }

    .farmer-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .farmer-stat-card {
        padding: 0.6rem;
        gap: 0.5rem;
    }

    .farmer-stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .farmer-stat-number {
        font-size: 0.95rem;
    }

    .farmer-form-row {
        grid-template-columns: 1fr;
    }

    .farmer-password-row {
        grid-template-columns: 1fr;
    }

    .farmer-products-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .farmer-product-image {
        height: 120px;
    }

    .farmer-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .farmer-table-search,
    .farmer-filter-select {
        width: 100%;
        min-width: unset;
    }

    .farmer-enquiry-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .farmer-enquiry-actions {
        width: 100%;
    }

    .farmer-enquiry-actions .farmer-btn {
        flex: 1;
        justify-content: center;
    }

    .farmer-reviews-summary {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .farmer-notification-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .farmer-notification-actions {
        width: 100%;
    }

    .farmer-notification-actions .farmer-btn {
        flex: 1;
        justify-content: center;
    }

    .farmer-settings-container {
        grid-template-columns: 1fr;
    }

    .farmer-quick-actions {
        flex-direction: column;
    }

    .farmer-quick-actions .farmer-btn {
        width: 100%;
        justify-content: center;
    }

    .farmer-modal {
        margin: 0.5rem;
        max-height: 95vh;
    }

    .farmer-modal-footer {
        flex-direction: column;
    }

    .farmer-modal-footer .farmer-btn {
        width: 100%;
        justify-content: center;
    }

    .farmer-form-actions {
        flex-direction: column;
    }

    .farmer-form-actions .farmer-btn {
        width: 100%;
        justify-content: center;
    }

    .farmer-preview-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .farmer-preview-product-specs {
        grid-template-columns: 1fr 1fr;
    }

    .farmer-toast-container {
        bottom: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
    }
}

@media screen and (max-width: 480px) {
    .farmer-navbar {
        padding: 0.4rem 0.5rem;
    }

    .farmer-navbar-toggle {
        font-size: 1.1rem;
    }

    .farmer-search-wrapper {
        min-width: 70px;
        max-width: 100px;
    }

    .farmer-navbar-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .farmer-profile-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .farmer-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .farmer-stat-card {
        padding: 0.4rem;
        gap: 0.3rem;
    }

    .farmer-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .farmer-stat-number {
        font-size: 0.8rem;
    }

    .farmer-products-grid {
        grid-template-columns: 1fr;
    }

    .farmer-product-image {
        height: 150px;
    }

    .farmer-preview-product-specs {
        grid-template-columns: 1fr;
    }

    .farmer-review-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ============================================================
   buyer-dashboard.css · FarmConnect Buyer Dashboard
   ============================================================ */

:root {
    --buyer-sidebar-width: 260px;
    --buyer-sidebar-collapsed: 72px;
    --buyer-bg: #F0F5F0;
    --buyer-card-bg: #FFFFFF;
    --buyer-text: #111827;
    --buyer-text-secondary: #6B7280;
    --buyer-border: #E5E7EB;
    --buyer-shadow: 0 4px 16px rgba(0,0,0,0.04);
    --buyer-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- DARK MODE ----- */
.buyer-dark-mode {
    --buyer-bg: #0A1A0E;
    --buyer-card-bg: #0D2812;
    --buyer-text: #F8F9FA;
    --buyer-text-secondary: #9CA3AF;
    --buyer-border: #1A3A22;
    --buyer-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.buyer-dark-mode .buyer-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.buyer-dark-mode .buyer-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.buyer-dark-mode .buyer-stat-card,
.buyer-dark-mode .buyer-modal,
.buyer-dark-mode .buyer-settings-card,
.buyer-dark-mode .buyer-preview-card,
.buyer-dark-mode .buyer-saved-item,
.buyer-dark-mode .buyer-contact-item,
.buyer-dark-mode .buyer-review-item,
.buyer-dark-mode .buyer-notification-item {
    background: #0D2812;
    border-color: #1A3A22;
    color: #F8F9FA;
}

.buyer-dark-mode .buyer-form-input,
.buyer-dark-mode .buyer-form-textarea {
    background: #1A3A22;
    border-color: #2A4F34;
    color: #F8F9FA;
}

.buyer-dark-mode .buyer-form-input:focus,
.buyer-dark-mode .buyer-form-textarea:focus {
    border-color: #2D7D3A;
}

.buyer-dark-mode .buyer-modal-overlay {
    background: rgba(0,0,0,0.8);
}

.buyer-dark-mode .buyer-image-preview {
    border-color: #1A3A22;
    background: #1A3A22;
}

.buyer-dark-mode .buyer-toggle-slider {
    background: #1A3A22;
}

/* ----- SIDEBAR ----- */
.buyer-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--buyer-sidebar-width);
    background: #0A1F0E;
    border-right: 1px solid rgba(255,255,255,0.04);
    z-index: 1000;
    transition: width var(--buyer-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.buyer-sidebar.collapsed {
    width: var(--buyer-sidebar-collapsed);
}

.buyer-sidebar.collapsed .buyer-sidebar-brand,
.buyer-sidebar.collapsed .buyer-sidebar-link span {
    display: none;
}

.buyer-sidebar.collapsed .buyer-sidebar-link {
    justify-content: center;
    padding: 0.75rem;
}

.buyer-sidebar.collapsed .buyer-sidebar-link i {
    margin: 0;
    font-size: 1.4rem;
}

.buyer-sidebar-header {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.buyer-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.buyer-sidebar-logo-icon {
    color: #2D7D3A;
    font-size: 1.5rem;
}

.buyer-sidebar-collapse {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--buyer-transition);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buyer-sidebar.collapsed .buyer-sidebar-collapse i {
    transform: rotate(180deg);
}

.buyer-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    scrollbar-width: none;
}

.buyer-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.buyer-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: all var(--buyer-transition);
    margin-bottom: 0.15rem;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
}

.buyer-sidebar.collapsed .buyer-sidebar-link {
    padding: 0.7rem;
    justify-content: center;
}

.buyer-sidebar.collapsed .buyer-sidebar-link span {
    display: none;
}

.buyer-sidebar.collapsed .buyer-sidebar-link i {
    margin: 0;
    font-size: 1.3rem;
}

.buyer-sidebar-link i {
    width: 1.3rem;
    text-align: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.buyer-sidebar-link:hover {
    background: rgba(45,125,58,0.15);
    color: #FFFFFF;
}

.buyer-sidebar-link.active {
    background: rgba(45,125,58,0.2);
    color: #2D7D3A;
}

.buyer-sidebar-logout {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 0.75rem;
    color: rgba(255,255,255,0.4);
}

.buyer-sidebar-logout:hover {
    color: #EF4444;
}

/* ----- OVERLAY ----- */
.buyer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.buyer-overlay.active {
    display: block;
}

/* ----- MAIN CONTENT ----- */
.buyer-main {
    margin-left: var(--buyer-sidebar-width);
    min-height: 100vh;
    background: var(--buyer-bg);
    transition: margin-left var(--buyer-transition);
}

.buyer-sidebar.collapsed ~ .buyer-main {
    margin-left: var(--buyer-sidebar-collapsed);
}

/* ----- NAVBAR ----- */
.buyer-navbar {
    background: #0D2812;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 0.5rem;
    min-height: 64px;
}

.buyer-navbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.buyer-navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.buyer-navbar-toggle i {
    transition: transform 0.3s ease;
}

.buyer-navbar-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

.buyer-navbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.buyer-search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border-radius: 60px;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.04);
    transition: var(--buyer-transition);
    min-width: 200px;
    flex-shrink: 1;
}

.buyer-search-wrapper:focus-within {
    border-color: rgba(45,125,58,0.5);
    background: rgba(255,255,255,0.08);
}

.buyer-search-icon {
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

.buyer-search-input {
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.buyer-search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.buyer-navbar-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.04);
    color: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--buyer-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 1rem;
    flex-shrink: 0;
}

.buyer-navbar-btn:hover {
    background: rgba(255,255,255,0.1);
}

.buyer-notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    border: 2px solid #0D2812;
    display: none;
}

/* ----- PROFILE DROPDOWN ----- */
.buyer-profile-dropdown {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.buyer-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 60px;
    transition: all 0.3s ease;
}

.buyer-profile-trigger:hover {
    background: rgba(255,255,255,0.05);
}

.buyer-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2D7D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
}

.buyer-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buyer-profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.buyer-profile-name {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.85rem;
}

.buyer-profile-role {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
}

.buyer-profile-arrow {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    margin-left: 0.2rem;
}

.buyer-profile-dropdown.active .buyer-profile-arrow {
    transform: rotate(180deg);
}

.buyer-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--buyer-card-bg);
    border-radius: 12px;
    border: 1px solid var(--buyer-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.buyer-profile-dropdown.active .buyer-profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.buyer-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: var(--buyer-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.buyer-profile-menu-item:hover {
    background: rgba(45,125,58,0.08);
    color: #2D7D3A;
}

.buyer-profile-menu-item i {
    width: 1.2rem;
    text-align: center;
    font-size: 1rem;
    color: var(--buyer-text-secondary);
}

.buyer-profile-menu-item:hover i {
    color: #2D7D3A;
}

.buyer-profile-menu-divider {
    height: 1px;
    background: var(--buyer-border);
    margin: 0.3rem 0.5rem;
}

.buyer-profile-menu-logout {
    color: #EF4444;
}

.buyer-profile-menu-logout:hover {
    background: rgba(239,68,68,0.08);
    color: #EF4444;
}

/* ----- CONTENT ----- */
.buyer-content {
    padding: 1.5rem;
}

.buyer-section {
    display: none;
    animation: buyerFadeIn 0.4s ease;
}

.buyer-section.active {
    display: block;
}

@keyframes buyerFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- WELCOME ----- */
.buyer-welcome h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--buyer-text);
    margin-bottom: 0.2rem;
}

.buyer-welcome p {
    color: var(--buyer-text-secondary);
    margin-bottom: 1.5rem;
}

/* ----- STATS ----- */
.buyer-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.buyer-stat-card {
    background: var(--buyer-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--buyer-transition);
}

.buyer-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45,125,58,0.08);
}

.buyer-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(45,125,58,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #2D7D3A;
    flex-shrink: 0;
}

.buyer-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--buyer-text);
    line-height: 1.1;
}

.buyer-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--buyer-text-secondary);
    font-weight: 500;
}

/* ----- ACTIVITY ----- */
.buyer-recent-activity {
    background: var(--buyer-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
    margin-bottom: 1.5rem;
}

.buyer-recent-activity h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--buyer-text);
    margin-bottom: 0.75rem;
}

.buyer-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.buyer-activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--buyer-text);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--buyer-border);
}

.buyer-activity-item:last-child {
    border-bottom: none;
}

.buyer-activity-item i {
    width: 1.2rem;
    text-align: center;
}

.buyer-activity-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--buyer-text-secondary);
}

/* ----- QUICK ACTIONS ----- */
.buyer-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ----- BUTTONS ----- */
.buyer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    border-radius: 60px;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    transition: var(--buyer-transition);
    cursor: pointer;
    background: transparent;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.buyer-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(45,125,58,0.3);
}

.buyer-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45,125,58,0.35);
    color: #FFFFFF;
}

.buyer-btn-outline {
    border: 1.5px solid var(--buyer-border);
    color: var(--buyer-text);
}

.buyer-btn-outline:hover {
    border-color: #2D7D3A;
    color: #2D7D3A;
}

.buyer-btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

/* ----- FORM ----- */
.buyer-form-group {
    margin-bottom: 1rem;
}

.buyer-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--buyer-text);
    margin-bottom: 0.3rem;
}

.buyer-form-private {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--buyer-text-secondary);
}

.buyer-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.buyer-form-input,
.buyer-form-textarea {
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--buyer-border);
    background: var(--buyer-bg);
    color: var(--buyer-text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: var(--buyer-transition);
    outline: none;
}

.buyer-form-input:focus,
.buyer-form-textarea:focus {
    border-color: #2D7D3A;
    box-shadow: 0 0 0 3px rgba(45,125,58,0.1);
}

.buyer-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.buyer-form-divider {
    height: 1px;
    background: var(--buyer-border);
    margin: 1.5rem 0;
}

.buyer-form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* ----- IMAGE UPLOAD ----- */
.buyer-image-upload {
    cursor: pointer;
}

.buyer-image-preview {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--buyer-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--buyer-text-secondary);
    transition: var(--buyer-transition);
    background: var(--buyer-bg);
    overflow: hidden;
}

.buyer-image-preview:hover {
    border-color: #2D7D3A;
}

.buyer-image-preview i {
    font-size: 2rem;
    margin-bottom: 0.3rem;
    color: #2D7D3A;
}

.buyer-image-preview span {
    font-size: 0.7rem;
}

.buyer-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- PROFILE PREVIEW ----- */
.buyer-profile-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.buyer-profile-preview-wrapper h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--buyer-text);
    margin-bottom: 1rem;
}

.buyer-preview-card {
    background: var(--buyer-card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
    position: sticky;
    top: 80px;
}

.buyer-preview-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.buyer-preview-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #2D7D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
}

.buyer-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buyer-preview-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--buyer-text);
    margin: 0 0 0.2rem;
}

.buyer-preview-info p {
    font-size: 0.85rem;
    color: var(--buyer-text-secondary);
    margin: 0.1rem 0;
}

.buyer-preview-info p i {
    margin-right: 0.3rem;
    color: #2D7D3A;
    width: 1.2rem;
}

.buyer-preview-contact {
    margin: 0.5rem 0;
}

.buyer-preview-bio {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--buyer-text);
    line-height: 1.5;
}

/* ----- TABLE HEADER ----- */
.buyer-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.buyer-table-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--buyer-text);
    margin: 0;
}

.buyer-table-search {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--buyer-border);
    background: var(--buyer-card-bg);
    color: var(--buyer-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
}

.buyer-table-search:focus {
    border-color: #2D7D3A;
}

.buyer-filter-select {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--buyer-border);
    background: var(--buyer-card-bg);
    color: var(--buyer-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}

/* ----- SAVED PRODUCTS ----- */
.buyer-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.buyer-saved-item {
    background: var(--buyer-card-bg);
    border-radius: 16px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
    overflow: hidden;
    transition: var(--buyer-transition);
}

.buyer-saved-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45,125,58,0.08);
}

.buyer-saved-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #F0F5F0;
}

.buyer-saved-body {
    padding: 1rem;
}

.buyer-saved-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--buyer-text);
    margin: 0 0 0.2rem;
}

.buyer-saved-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--buyer-text-secondary);
}

.buyer-saved-price {
    font-weight: 700;
    color: #2D7D3A;
    font-size: 0.9rem;
}

.buyer-saved-status {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 60px;
}

.buyer-saved-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.buyer-saved-actions .buyer-btn {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* ----- CONTACTS ----- */
.buyer-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.buyer-contact-item {
    background: var(--buyer-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.buyer-contact-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--buyer-text);
    margin: 0;
}

.buyer-contact-info p {
    font-size: 0.85rem;
    color: var(--buyer-text-secondary);
    margin: 0.1rem 0;
}

.buyer-contact-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 60px;
}

.buyer-contact-status-contacted {
    background: #DBEAFE;
    color: #2563EB;
}

.buyer-contact-status-ongoing {
    background: #FEF3C7;
    color: #B45309;
}

.buyer-contact-status-closed {
    background: #DFF0E0;
    color: #236B2E;
}

.buyer-contact-actions {
    display: flex;
    gap: 0.4rem;
}

/* ----- REVIEWS ----- */
.buyer-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.buyer-review-item {
    background: var(--buyer-card-bg);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
}

.buyer-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.buyer-review-recipient {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--buyer-text);
}

.buyer-review-type {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 60px;
    background: #DFF0E0;
    color: #236B2E;
}

.buyer-review-stars {
    color: #F59E0B;
    font-size: 0.85rem;
}

.buyer-review-text {
    font-size: 0.9rem;
    color: var(--buyer-text);
    margin-bottom: 0.3rem;
}

.buyer-review-date {
    font-size: 0.75rem;
    color: var(--buyer-text-secondary);
}

.buyer-review-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* ----- NOTIFICATIONS ----- */
.buyer-notifications-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.buyer-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.buyer-notification-item {
    background: var(--buyer-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--buyer-transition);
}

.buyer-notification-item:hover {
    border-color: rgba(45,125,58,0.2);
}

.buyer-notification-item.unread {
    border-left: 3px solid #2D7D3A;
    background: rgba(45,125,58,0.02);
}

.buyer-notification-content {
    flex: 1;
}

.buyer-notification-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--buyer-text);
}

.buyer-notification-message {
    font-size: 0.85rem;
    color: var(--buyer-text-secondary);
    margin: 0.1rem 0;
}

.buyer-notification-time {
    font-size: 0.7rem;
    color: var(--buyer-text-secondary);
}

.buyer-notification-actions {
    display: flex;
    gap: 0.4rem;
}

/* ----- SETTINGS ----- */
.buyer-settings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.buyer-settings-card {
    background: var(--buyer-card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--buyer-border);
    box-shadow: var(--buyer-shadow);
}

.buyer-settings-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--buyer-text);
    margin-bottom: 1rem;
}

.buyer-password-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.buyer-settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--buyer-border);
}

.buyer-settings-toggle:last-child {
    border-bottom: none;
}

.buyer-settings-toggle span {
    font-size: 0.9rem;
    color: var(--buyer-text);
}

/* ----- TOGGLE ----- */
.buyer-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.buyer-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.buyer-toggle-slider {
    position: absolute;
    inset: 0;
    background: #9CA3AF;
    border-radius: 60px;
    transition: 0.3s ease;
}

.buyer-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: 0.3s ease;
}

.buyer-toggle input:checked + .buyer-toggle-slider {
    background: #2D7D3A;
}

.buyer-toggle input:checked + .buyer-toggle-slider::before {
    transform: translateX(20px);
}

/* ----- MODAL ----- */
.buyer-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.buyer-modal-overlay.active {
    display: flex;
}

.buyer-modal {
    background: var(--buyer-card-bg);
    border-radius: 20px;
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    animation: buyerModalIn 0.3s ease;
}

@keyframes buyerModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.buyer-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--buyer-border);
}

.buyer-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--buyer-text);
    margin: 0;
}

.buyer-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--buyer-text-secondary);
    cursor: pointer;
    transition: var(--buyer-transition);
    line-height: 1;
}

.buyer-modal-close:hover {
    color: var(--buyer-text);
    transform: rotate(90deg);
}

.buyer-modal-body {
    padding: 1.5rem;
    color: var(--buyer-text);
}

.buyer-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--buyer-border);
    justify-content: flex-end;
}

/* ----- TOAST ----- */
.buyer-toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    width: 100%;
}

.buyer-toast {
    background: var(--buyer-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--buyer-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: toastIn 0.4s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.buyer-toast-success {
    border-left: 4px solid #10B981;
}

.buyer-toast-error {
    border-left: 4px solid #EF4444;
}

.buyer-toast-info {
    border-left: 4px solid #3B82F6;
}

.buyer-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.buyer-toast-success .buyer-toast-icon {
    color: #10B981;
}

.buyer-toast-error .buyer-toast-icon {
    color: #EF4444;
}

.buyer-toast-info .buyer-toast-icon {
    color: #3B82F6;
}

.buyer-toast-content {
    flex: 1;
}

.buyer-toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--buyer-text);
}

.buyer-toast-message {
    font-size: 0.85rem;
    color: var(--buyer-text-secondary);
}

.buyer-toast-close {
    background: none;
    border: none;
    color: var(--buyer-text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 992px) {
    .buyer-sidebar {
        transform: translateX(-100%);
        width: var(--buyer-sidebar-width);
        transition: transform var(--buyer-transition);
    }

    .buyer-sidebar.mobile-open {
        transform: translateX(0);
    }

    .buyer-main {
        margin-left: 0 !important;
    }

    .buyer-navbar-toggle {
        display: block;
    }

    .buyer-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .buyer-profile-container {
        grid-template-columns: 1fr;
    }

    .buyer-preview-card {
        position: relative;
        top: 0;
    }

    .buyer-settings-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .buyer-navbar {
        padding: 0.5rem 0.75rem;
        gap: 0.3rem;
    }

    .buyer-navbar-title {
        font-size: 0.9rem;
    }

    .buyer-navbar-right {
        gap: 0.3rem;
    }

    .buyer-search-wrapper {
        min-width: 100px;
        flex: 1;
        max-width: 150px;
    }

    .buyer-search-input {
        font-size: 0.75rem;
        padding: 0.3rem 0.3rem;
    }

    .buyer-navbar-btn {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .buyer-profile-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .buyer-profile-info {
        display: none;
    }

    .buyer-profile-arrow {
        display: none;
    }

    .buyer-content {
        padding: 0.75rem;
    }

    .buyer-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .buyer-stat-card {
        padding: 0.6rem;
        gap: 0.5rem;
    }

    .buyer-stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .buyer-stat-number {
        font-size: 0.95rem;
    }

    .buyer-form-row {
        grid-template-columns: 1fr;
    }

    .buyer-password-row {
        grid-template-columns: 1fr;
    }

    .buyer-saved-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .buyer-saved-image {
        height: 120px;
    }

    .buyer-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .buyer-table-search,
    .buyer-filter-select {
        width: 100%;
        min-width: unset;
    }

    .buyer-contact-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .buyer-contact-actions {
        width: 100%;
    }

    .buyer-contact-actions .buyer-btn {
        flex: 1;
        justify-content: center;
    }

    .buyer-review-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .buyer-notification-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .buyer-notification-actions {
        width: 100%;
    }

    .buyer-notification-actions .buyer-btn {
        flex: 1;
        justify-content: center;
    }

    .buyer-quick-actions {
        flex-direction: column;
    }

    .buyer-quick-actions .buyer-btn {
        width: 100%;
        justify-content: center;
    }

    .buyer-modal {
        margin: 0.5rem;
        max-height: 95vh;
    }

    .buyer-modal-footer {
        flex-direction: column;
    }

    .buyer-modal-footer .buyer-btn {
        width: 100%;
        justify-content: center;
    }

    .buyer-form-actions {
        flex-direction: column;
    }

    .buyer-form-actions .buyer-btn {
        width: 100%;
        justify-content: center;
    }

    .buyer-preview-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .buyer-toast-container {
        bottom: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
    }
}

@media screen and (max-width: 480px) {
    .buyer-navbar {
        padding: 0.4rem 0.5rem;
    }

    .buyer-navbar-toggle {
        font-size: 1.1rem;
    }

    .buyer-search-wrapper {
        min-width: 70px;
        max-width: 100px;
    }

    .buyer-navbar-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .buyer-profile-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .buyer-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .buyer-stat-card {
        padding: 0.4rem;
        gap: 0.3rem;
    }

    .buyer-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .buyer-stat-number {
        font-size: 0.8rem;
    }

    .buyer-saved-grid {
        grid-template-columns: 1fr;
    }

    .buyer-saved-image {
        height: 150px;
    }
}


/* ============================================================
   logistics-dashboard.css · FarmConnect Logistics Dashboard
   ============================================================ */

:root {
    --logistics-sidebar-width: 260px;
    --logistics-sidebar-collapsed: 72px;
    --logistics-bg: #F0F5F0;
    --logistics-card-bg: #FFFFFF;
    --logistics-text: #111827;
    --logistics-text-secondary: #6B7280;
    --logistics-border: #E5E7EB;
    --logistics-shadow: 0 4px 16px rgba(0,0,0,0.04);
    --logistics-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- DARK MODE ----- */
.logistics-dark-mode {
    --logistics-bg: #0A1A0E;
    --logistics-card-bg: #0D2812;
    --logistics-text: #F8F9FA;
    --logistics-text-secondary: #9CA3AF;
    --logistics-border: #1A3A22;
    --logistics-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.logistics-dark-mode .logistics-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.logistics-dark-mode .logistics-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.logistics-dark-mode .logistics-stat-card,
.logistics-dark-mode .logistics-modal,
.logistics-dark-mode .logistics-settings-card,
.logistics-dark-mode .logistics-preview-card,
.logistics-dark-mode .logistics-service-item,
.logistics-dark-mode .logistics-contact-item,
.logistics-dark-mode .logistics-review-item,
.logistics-dark-mode .logistics-notification-item {
    background: #0D2812;
    border-color: #1A3A22;
    color: #F8F9FA;
}

.logistics-dark-mode .logistics-form-input,
.logistics-dark-mode .logistics-form-textarea {
    background: #1A3A22;
    border-color: #2A4F34;
    color: #F8F9FA;
}

.logistics-dark-mode .logistics-form-input:focus,
.logistics-dark-mode .logistics-form-textarea:focus {
    border-color: #2D7D3A;
}

.logistics-dark-mode .logistics-modal-overlay {
    background: rgba(0,0,0,0.8);
}

.logistics-dark-mode .logistics-image-preview {
    border-color: #1A3A22;
    background: #1A3A22;
}

.logistics-dark-mode .logistics-toggle-slider {
    background: #1A3A22;
}

/* ----- SIDEBAR ----- */
.logistics-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--logistics-sidebar-width);
    background: #0A1F0E;
    border-right: 1px solid rgba(255,255,255,0.04);
    z-index: 1000;
    transition: width var(--logistics-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.logistics-sidebar.collapsed {
    width: var(--logistics-sidebar-collapsed);
}

.logistics-sidebar.collapsed .logistics-sidebar-brand,
.logistics-sidebar.collapsed .logistics-sidebar-link span {
    display: none;
}

.logistics-sidebar.collapsed .logistics-sidebar-link {
    justify-content: center;
    padding: 0.75rem;
}

.logistics-sidebar.collapsed .logistics-sidebar-link i {
    margin: 0;
    font-size: 1.4rem;
}

.logistics-sidebar-header {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.logistics-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.logistics-sidebar-logo-icon {
    color: #2D7D3A;
    font-size: 1.5rem;
}

.logistics-sidebar-collapse {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--logistics-transition);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logistics-sidebar.collapsed .logistics-sidebar-collapse i {
    transform: rotate(180deg);
}

.logistics-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    scrollbar-width: none;
}

.logistics-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.logistics-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: all var(--logistics-transition);
    margin-bottom: 0.15rem;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
}

.logistics-sidebar.collapsed .logistics-sidebar-link {
    padding: 0.7rem;
    justify-content: center;
}

.logistics-sidebar.collapsed .logistics-sidebar-link span {
    display: none;
}

.logistics-sidebar.collapsed .logistics-sidebar-link i {
    margin: 0;
    font-size: 1.3rem;
}

.logistics-sidebar-link i {
    width: 1.3rem;
    text-align: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.logistics-sidebar-link:hover {
    background: rgba(45,125,58,0.15);
    color: #FFFFFF;
}

.logistics-sidebar-link.active {
    background: rgba(45,125,58,0.2);
    color: #2D7D3A;
}

.logistics-sidebar-logout {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 0.75rem;
    color: rgba(255,255,255,0.4);
}

.logistics-sidebar-logout:hover {
    color: #EF4444;
}

/* ----- OVERLAY ----- */
.logistics-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.logistics-overlay.active {
    display: block;
}

/* ----- MAIN CONTENT ----- */
.logistics-main {
    margin-left: var(--logistics-sidebar-width);
    min-height: 100vh;
    background: var(--logistics-bg);
    transition: margin-left var(--logistics-transition);
}

.logistics-sidebar.collapsed ~ .logistics-main {
    margin-left: var(--logistics-sidebar-collapsed);
}

/* ----- NAVBAR ----- */
.logistics-navbar {
    background: #0D2812;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 0.5rem;
    min-height: 64px;
}

.logistics-navbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.logistics-navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.logistics-navbar-toggle i {
    transition: transform 0.3s ease;
}

.logistics-navbar-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

.logistics-navbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.logistics-search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border-radius: 60px;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.04);
    transition: var(--logistics-transition);
    min-width: 200px;
    flex-shrink: 1;
}

.logistics-search-wrapper:focus-within {
    border-color: rgba(45,125,58,0.5);
    background: rgba(255,255,255,0.08);
}

.logistics-search-icon {
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

.logistics-search-input {
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.logistics-search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.logistics-navbar-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.04);
    color: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--logistics-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 1rem;
    flex-shrink: 0;
}

.logistics-navbar-btn:hover {
    background: rgba(255,255,255,0.1);
}

.logistics-notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    border: 2px solid #0D2812;
    display: none;
}

/* ----- PROFILE DROPDOWN ----- */
.logistics-profile-dropdown {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.logistics-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 60px;
    transition: all 0.3s ease;
}

.logistics-profile-trigger:hover {
    background: rgba(255,255,255,0.05);
}

.logistics-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2D7D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
}

.logistics-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logistics-profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logistics-profile-name {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.85rem;
}

.logistics-profile-role {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
}

.logistics-profile-arrow {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    margin-left: 0.2rem;
}

.logistics-profile-dropdown.active .logistics-profile-arrow {
    transform: rotate(180deg);
}

.logistics-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--logistics-card-bg);
    border-radius: 12px;
    border: 1px solid var(--logistics-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.logistics-profile-dropdown.active .logistics-profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.logistics-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: var(--logistics-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.logistics-profile-menu-item:hover {
    background: rgba(45,125,58,0.08);
    color: #2D7D3A;
}

.logistics-profile-menu-item i {
    width: 1.2rem;
    text-align: center;
    font-size: 1rem;
    color: var(--logistics-text-secondary);
}

.logistics-profile-menu-item:hover i {
    color: #2D7D3A;
}

.logistics-profile-menu-divider {
    height: 1px;
    background: var(--logistics-border);
    margin: 0.3rem 0.5rem;
}

.logistics-profile-menu-logout {
    color: #EF4444;
}

.logistics-profile-menu-logout:hover {
    background: rgba(239,68,68,0.08);
    color: #EF4444;
}

/* ----- CONTENT ----- */
.logistics-content {
    padding: 1.5rem;
}

.logistics-section {
    display: none;
    animation: logisticsFadeIn 0.4s ease;
}

.logistics-section.active {
    display: block;
}

@keyframes logisticsFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- WELCOME ----- */
.logistics-welcome h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--logistics-text);
    margin-bottom: 0.2rem;
}

.logistics-welcome p {
    color: var(--logistics-text-secondary);
    margin-bottom: 1.5rem;
}

/* ----- STATS ----- */
.logistics-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.logistics-stat-card {
    background: var(--logistics-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--logistics-transition);
}

.logistics-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45,125,58,0.08);
}

.logistics-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(45,125,58,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #2D7D3A;
    flex-shrink: 0;
}

.logistics-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--logistics-text);
    line-height: 1.1;
}

.logistics-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--logistics-text-secondary);
    font-weight: 500;
}

/* ----- ACTIVITY ----- */
.logistics-recent-activity {
    background: var(--logistics-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
    margin-bottom: 1.5rem;
}

.logistics-recent-activity h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--logistics-text);
    margin-bottom: 0.75rem;
}

.logistics-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.logistics-activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--logistics-text);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--logistics-border);
}

.logistics-activity-item:last-child {
    border-bottom: none;
}

.logistics-activity-item i {
    width: 1.2rem;
    text-align: center;
}

.logistics-activity-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--logistics-text-secondary);
}

/* ----- QUICK ACTIONS ----- */
.logistics-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ----- BUTTONS ----- */
.logistics-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    border-radius: 60px;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    transition: var(--logistics-transition);
    cursor: pointer;
    background: transparent;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.logistics-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(45,125,58,0.3);
}

.logistics-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45,125,58,0.35);
    color: #FFFFFF;
}

.logistics-btn-outline {
    border: 1.5px solid var(--logistics-border);
    color: var(--logistics-text);
}

.logistics-btn-outline:hover {
    border-color: #2D7D3A;
    color: #2D7D3A;
}

.logistics-btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

/* ----- FORM ----- */
.logistics-form-group {
    margin-bottom: 1rem;
}

.logistics-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--logistics-text);
    margin-bottom: 0.3rem;
}

.logistics-form-private {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--logistics-text-secondary);
}

.logistics-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.logistics-form-input,
.logistics-form-textarea {
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--logistics-border);
    background: var(--logistics-bg);
    color: var(--logistics-text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: var(--logistics-transition);
    outline: none;
}

.logistics-form-input:focus,
.logistics-form-textarea:focus {
    border-color: #2D7D3A;
    box-shadow: 0 0 0 3px rgba(45,125,58,0.1);
}

.logistics-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.logistics-form-divider {
    height: 1px;
    background: var(--logistics-border);
    margin: 1.5rem 0;
}

.logistics-form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* ----- IMAGE UPLOAD ----- */
.logistics-image-upload {
    cursor: pointer;
}

.logistics-image-preview {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--logistics-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--logistics-text-secondary);
    transition: var(--logistics-transition);
    background: var(--logistics-bg);
    overflow: hidden;
}

.logistics-image-preview:hover {
    border-color: #2D7D3A;
}

.logistics-image-preview i {
    font-size: 2rem;
    margin-bottom: 0.3rem;
    color: #2D7D3A;
}

.logistics-image-preview span {
    font-size: 0.7rem;
}

.logistics-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- PROFILE PREVIEW ----- */
.logistics-profile-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.logistics-profile-preview-wrapper h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--logistics-text);
    margin-bottom: 1rem;
}

.logistics-preview-card {
    background: var(--logistics-card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
    position: sticky;
    top: 80px;
}

.logistics-preview-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.logistics-preview-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #2D7D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
}

.logistics-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logistics-preview-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--logistics-text);
    margin: 0 0 0.2rem;
}

.logistics-preview-info p {
    font-size: 0.85rem;
    color: var(--logistics-text-secondary);
    margin: 0.1rem 0;
}

.logistics-preview-info p i {
    margin-right: 0.3rem;
    color: #2D7D3A;
    width: 1.2rem;
}

.logistics-preview-contact {
    margin: 0.5rem 0;
}

.logistics-preview-bio {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--logistics-text);
    line-height: 1.5;
}

/* ----- TABLE HEADER ----- */
.logistics-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.logistics-table-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--logistics-text);
    margin: 0;
}

.logistics-table-search {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--logistics-border);
    background: var(--logistics-card-bg);
    color: var(--logistics-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
}

.logistics-table-search:focus {
    border-color: #2D7D3A;
}

.logistics-filter-select {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--logistics-border);
    background: var(--logistics-card-bg);
    color: var(--logistics-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}

/* ----- SERVICES ----- */
.logistics-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.logistics-service-item {
    background: var(--logistics-card-bg);
    border-radius: 16px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
    overflow: hidden;
    transition: var(--logistics-transition);
}

.logistics-service-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45,125,58,0.08);
}

.logistics-service-image {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #F0F5F0;
}

.logistics-service-body {
    padding: 1rem;
}

.logistics-service-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--logistics-text);
    margin: 0 0 0.2rem;
}

.logistics-service-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--logistics-text-secondary);
}

.logistics-service-status {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 60px;
}

.logistics-service-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.logistics-service-actions .logistics-btn {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* ----- CONTACTS ----- */
.logistics-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.logistics-contact-item {
    background: var(--logistics-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.logistics-contact-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--logistics-text);
    margin: 0;
}

.logistics-contact-info p {
    font-size: 0.85rem;
    color: var(--logistics-text-secondary);
    margin: 0.1rem 0;
}

.logistics-contact-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 60px;
}

.logistics-contact-status-contacted {
    background: #DBEAFE;
    color: #2563EB;
}

.logistics-contact-status-ongoing {
    background: #FEF3C7;
    color: #B45309;
}

.logistics-contact-status-closed {
    background: #DFF0E0;
    color: #236B2E;
}

.logistics-contact-actions {
    display: flex;
    gap: 0.4rem;
}

/* ----- REVIEWS ----- */
.logistics-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.logistics-review-item {
    background: var(--logistics-card-bg);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
}

.logistics-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.logistics-review-recipient {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--logistics-text);
}

.logistics-review-type {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 60px;
    background: #DBEAFE;
    color: #2563EB;
}

.logistics-review-stars {
    color: #F59E0B;
    font-size: 0.85rem;
}

.logistics-review-text {
    font-size: 0.9rem;
    color: var(--logistics-text);
    margin-bottom: 0.3rem;
}

.logistics-review-date {
    font-size: 0.75rem;
    color: var(--logistics-text-secondary);
}

.logistics-review-reply {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--logistics-bg);
    border-radius: 8px;
    border-left: 3px solid #2D7D3A;
}

.logistics-review-reply-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--logistics-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.logistics-review-reply-text {
    font-size: 0.85rem;
    color: var(--logistics-text);
    margin: 0.1rem 0 0;
}

.logistics-review-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* ----- NOTIFICATIONS ----- */
.logistics-notifications-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.logistics-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.logistics-notification-item {
    background: var(--logistics-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--logistics-transition);
}

.logistics-notification-item:hover {
    border-color: rgba(45,125,58,0.2);
}

.logistics-notification-item.unread {
    border-left: 3px solid #2D7D3A;
    background: rgba(45,125,58,0.02);
}

.logistics-notification-content {
    flex: 1;
}

.logistics-notification-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--logistics-text);
}

.logistics-notification-message {
    font-size: 0.85rem;
    color: var(--logistics-text-secondary);
    margin: 0.1rem 0;
}

.logistics-notification-time {
    font-size: 0.7rem;
    color: var(--logistics-text-secondary);
}

.logistics-notification-actions {
    display: flex;
    gap: 0.4rem;
}

/* ----- SETTINGS ----- */
.logistics-settings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.logistics-settings-card {
    background: var(--logistics-card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--logistics-border);
    box-shadow: var(--logistics-shadow);
}

.logistics-settings-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--logistics-text);
    margin-bottom: 1rem;
}

.logistics-password-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.logistics-settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--logistics-border);
}

.logistics-settings-toggle:last-child {
    border-bottom: none;
}

.logistics-settings-toggle span {
    font-size: 0.9rem;
    color: var(--logistics-text);
}

/* ----- TOGGLE ----- */
.logistics-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.logistics-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.logistics-toggle-slider {
    position: absolute;
    inset: 0;
    background: #9CA3AF;
    border-radius: 60px;
    transition: 0.3s ease;
}

.logistics-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: 0.3s ease;
}

.logistics-toggle input:checked + .logistics-toggle-slider {
    background: #2D7D3A;
}

.logistics-toggle input:checked + .logistics-toggle-slider::before {
    transform: translateX(20px);
}

/* ----- MODAL ----- */
.logistics-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.logistics-modal-overlay.active {
    display: flex;
}

.logistics-modal {
    background: var(--logistics-card-bg);
    border-radius: 20px;
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    animation: logisticsModalIn 0.3s ease;
}

@keyframes logisticsModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.logistics-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--logistics-border);
}

.logistics-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--logistics-text);
    margin: 0;
}

.logistics-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--logistics-text-secondary);
    cursor: pointer;
    transition: var(--logistics-transition);
    line-height: 1;
}

.logistics-modal-close:hover {
    color: var(--logistics-text);
    transform: rotate(90deg);
}

.logistics-modal-body {
    padding: 1.5rem;
    color: var(--logistics-text);
}

.logistics-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--logistics-border);
    justify-content: flex-end;
}

/* ----- TOAST ----- */
.logistics-toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    width: 100%;
}

.logistics-toast {
    background: var(--logistics-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--logistics-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: toastIn 0.4s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.logistics-toast-success {
    border-left: 4px solid #10B981;
}

.logistics-toast-error {
    border-left: 4px solid #EF4444;
}

.logistics-toast-info {
    border-left: 4px solid #3B82F6;
}

.logistics-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.logistics-toast-success .logistics-toast-icon {
    color: #10B981;
}

.logistics-toast-error .logistics-toast-icon {
    color: #EF4444;
}

.logistics-toast-info .logistics-toast-icon {
    color: #3B82F6;
}

.logistics-toast-content {
    flex: 1;
}

.logistics-toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--logistics-text);
}

.logistics-toast-message {
    font-size: 0.85rem;
    color: var(--logistics-text-secondary);
}

.logistics-toast-close {
    background: none;
    border: none;
    color: var(--logistics-text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 992px) {
    .logistics-sidebar {
        transform: translateX(-100%);
        width: var(--logistics-sidebar-width);
        transition: transform var(--logistics-transition);
    }

    .logistics-sidebar.mobile-open {
        transform: translateX(0);
    }

    .logistics-main {
        margin-left: 0 !important;
    }

    .logistics-navbar-toggle {
        display: block;
    }

    .logistics-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .logistics-profile-container {
        grid-template-columns: 1fr;
    }

    .logistics-preview-card {
        position: relative;
        top: 0;
    }

    .logistics-settings-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .logistics-navbar {
        padding: 0.5rem 0.75rem;
        gap: 0.3rem;
    }

    .logistics-navbar-title {
        font-size: 0.9rem;
    }

    .logistics-navbar-right {
        gap: 0.3rem;
    }

    .logistics-search-wrapper {
        min-width: 100px;
        flex: 1;
        max-width: 150px;
    }

    .logistics-search-input {
        font-size: 0.75rem;
        padding: 0.3rem 0.3rem;
    }

    .logistics-navbar-btn {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .logistics-profile-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .logistics-profile-info {
        display: none;
    }

    .logistics-profile-arrow {
        display: none;
    }

    .logistics-content {
        padding: 0.75rem;
    }

    .logistics-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .logistics-stat-card {
        padding: 0.6rem;
        gap: 0.5rem;
    }

    .logistics-stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .logistics-stat-number {
        font-size: 0.95rem;
    }

    .logistics-form-row {
        grid-template-columns: 1fr;
    }

    .logistics-password-row {
        grid-template-columns: 1fr;
    }

    .logistics-services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .logistics-service-image {
        height: 120px;
    }

    .logistics-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .logistics-table-search,
    .logistics-filter-select {
        width: 100%;
        min-width: unset;
    }

    .logistics-contact-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .logistics-contact-actions {
        width: 100%;
    }

    .logistics-contact-actions .logistics-btn {
        flex: 1;
        justify-content: center;
    }

    .logistics-review-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .logistics-notification-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .logistics-notification-actions {
        width: 100%;
    }

    .logistics-notification-actions .logistics-btn {
        flex: 1;
        justify-content: center;
    }

    .logistics-quick-actions {
        flex-direction: column;
    }

    .logistics-quick-actions .logistics-btn {
        width: 100%;
        justify-content: center;
    }

    .logistics-modal {
        margin: 0.5rem;
        max-height: 95vh;
    }

    .logistics-modal-footer {
        flex-direction: column;
    }

    .logistics-modal-footer .logistics-btn {
        width: 100%;
        justify-content: center;
    }

    .logistics-form-actions {
        flex-direction: column;
    }

    .logistics-form-actions .logistics-btn {
        width: 100%;
        justify-content: center;
    }

    .logistics-preview-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logistics-toast-container {
        bottom: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
    }
}

@media screen and (max-width: 480px) {
    .logistics-navbar {
        padding: 0.4rem 0.5rem;
    }

    .logistics-navbar-toggle {
        font-size: 1.1rem;
    }

    .logistics-search-wrapper {
        min-width: 70px;
        max-width: 100px;
    }

    .logistics-navbar-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .logistics-profile-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .logistics-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .logistics-stat-card {
        padding: 0.4rem;
        gap: 0.3rem;
    }

    .logistics-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .logistics-stat-number {
        font-size: 0.8rem;
    }

    .logistics-services-grid {
        grid-template-columns: 1fr;
    }

    .logistics-service-image {
        height: 150px;
    }
}

/* ============================================================
   FIX: LOGISTICS PUBLIC PAGE OUTLINE BUTTONS
   ============================================================ */

/* ----- Logistics Public Page Outline Buttons ----- */


.logistics-cta-btn-outline:hover,
.detail-btn-outline:hover {
    background: #2D7D3A !important;
    color: #FFFFFF !important;
    border-color: #2D7D3A !important;
}

/* ----- Logistics Dashboard Outline Buttons (Keep as is) ----- */
.logistics-btn-outline {
    background: transparent !important;
    color: var(--logistics-text, #111827) !important;
    border: 1.5px solid var(--logistics-border, #E5E7EB) !important;
}

.logistics-btn-outline:hover {
    color: #236B2E !important;
    border-color: #236B2E !important;
    background: transparent !important;
}

/* ----- Dark Mode for Logistics Dashboard ----- */
.logistics-dark-mode .logistics-btn-outline {
    color: #F8F9FA !important;
    border-color: #1A3A22 !important;
}

.logistics-dark-mode .logistics-btn-outline:hover {
    color: #236B2E !important;
    border-color: #236B2E !important;
    background: transparent !important;
}

/* ============================================================
   admin-dashboard.css · FarmConnect Admin Dashboard
   ============================================================ */

:root {
    --admin-sidebar-width: 260px;
    --admin-sidebar-collapsed: 72px;
    --admin-bg: #F0F5F0;
    --admin-card-bg: #FFFFFF;
    --admin-text: #111827;
    --admin-text-secondary: #6B7280;
    --admin-border: #E5E7EB;
    --admin-shadow: 0 4px 16px rgba(0,0,0,0.04);
    --admin-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- DARK MODE ----- */
.admin-dark-mode {
    --admin-bg: #0A1A0E;
    --admin-card-bg: #0D2812;
    --admin-text: #F8F9FA;
    --admin-text-secondary: #9CA3AF;
    --admin-border: #1A3A22;
    --admin-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.admin-dark-mode .admin-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.admin-dark-mode .admin-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.admin-dark-mode .admin-stat-card,
.admin-dark-mode .admin-modal,
.admin-dark-mode .admin-settings-card,
.admin-dark-mode .admin-table {
    background: #0D2812;
    border-color: #1A3A22;
    color: #F8F9FA;
}

.admin-dark-mode .admin-table th {
    border-bottom-color: #1A3A22;
}

.admin-dark-mode .admin-table td {
    border-bottom-color: #1A3A22;
}

.admin-dark-mode .admin-form-input {
    background: #1A3A22;
    border-color: #2A4F34;
    color: #F8F9FA;
}

.admin-dark-mode .admin-form-input:focus {
    border-color: #2D7D3A;
}

.admin-dark-mode .admin-modal-overlay {
    background: rgba(0,0,0,0.8);
}

.admin-dark-mode .admin-toggle-slider {
    background: #1A3A22;
}

/* ----- SIDEBAR ----- */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--admin-sidebar-width);
    background: #0A1F0E;
    border-right: 1px solid rgba(255,255,255,0.04);
    z-index: 1000;
    transition: width var(--admin-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-sidebar.collapsed {
    width: var(--admin-sidebar-collapsed);
}

.admin-sidebar.collapsed .admin-sidebar-brand,
.admin-sidebar.collapsed .admin-sidebar-link span {
    display: none;
}

.admin-sidebar.collapsed .admin-sidebar-link {
    justify-content: center;
    padding: 0.75rem;
}

.admin-sidebar.collapsed .admin-sidebar-link i {
    margin: 0;
    font-size: 1.4rem;
}

.admin-sidebar-header {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.admin-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.admin-sidebar-logo-icon {
    color: #2D7D3A;
    font-size: 1.5rem;
}

.admin-sidebar-collapse {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--admin-transition);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-sidebar.collapsed .admin-sidebar-collapse i {
    transform: rotate(180deg);
}

.admin-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    scrollbar-width: none;
}

.admin-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: all var(--admin-transition);
    margin-bottom: 0.15rem;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
}

.admin-sidebar.collapsed .admin-sidebar-link {
    padding: 0.7rem;
    justify-content: center;
}

.admin-sidebar.collapsed .admin-sidebar-link span {
    display: none;
}

.admin-sidebar.collapsed .admin-sidebar-link i {
    margin: 0;
    font-size: 1.3rem;
}

.admin-sidebar-link i {
    width: 1.3rem;
    text-align: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.admin-sidebar-link:hover {
    background: rgba(45,125,58,0.15);
    color: #FFFFFF;
}

.admin-sidebar-link.active {
    background: rgba(45,125,58,0.2);
    color: #2D7D3A;
}

.admin-sidebar-logout {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 0.75rem;
    color: rgba(255,255,255,0.4);
}

.admin-sidebar-logout:hover {
    color: #EF4444;
}

/* ----- OVERLAY ----- */
.admin-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.admin-overlay.active {
    display: block;
}

/* ----- MAIN CONTENT ----- */
.admin-main {
    margin-left: var(--admin-sidebar-width);
    min-height: 100vh;
    background: var(--admin-bg);
    transition: margin-left var(--admin-transition);
}

.admin-sidebar.collapsed ~ .admin-main {
    margin-left: var(--admin-sidebar-collapsed);
}

/* ----- NAVBAR ----- */
.admin-navbar {
    background: #0D2812;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 0.5rem;
    min-height: 64px;
}

.admin-navbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.admin-navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.admin-navbar-toggle i {
    transition: transform 0.3s ease;
}

.admin-navbar-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

.admin-navbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.admin-search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border-radius: 60px;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.04);
    transition: var(--admin-transition);
    min-width: 200px;
    flex-shrink: 1;
}

.admin-search-wrapper:focus-within {
    border-color: rgba(45,125,58,0.5);
    background: rgba(255,255,255,0.08);
}

.admin-search-icon {
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

.admin-search-input {
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.admin-search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.admin-navbar-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.04);
    color: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--admin-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 1rem;
    flex-shrink: 0;
}

.admin-navbar-btn:hover {
    background: rgba(255,255,255,0.1);
}

.admin-notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    border: 2px solid #0D2812;
    display: none;
}

/* ----- PROFILE DROPDOWN ----- */
.admin-profile-dropdown {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.admin-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 60px;
    transition: all 0.3s ease;
}

.admin-profile-trigger:hover {
    background: rgba(255,255,255,0.05);
}

.admin-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2D7D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
}

.admin-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.admin-profile-name {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.85rem;
}

.admin-profile-role {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
}

.admin-profile-arrow {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    margin-left: 0.2rem;
}

.admin-profile-dropdown.active .admin-profile-arrow {
    transform: rotate(180deg);
}

.admin-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--admin-card-bg);
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.admin-profile-dropdown.active .admin-profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: var(--admin-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.admin-profile-menu-item:hover {
    background: rgba(45,125,58,0.08);
    color: #2D7D3A;
}

.admin-profile-menu-item i {
    width: 1.2rem;
    text-align: center;
    font-size: 1rem;
    color: var(--admin-text-secondary);
}

.admin-profile-menu-item:hover i {
    color: #2D7D3A;
}

.admin-profile-menu-divider {
    height: 1px;
    background: var(--admin-border);
    margin: 0.3rem 0.5rem;
}

.admin-profile-menu-logout {
    color: #EF4444;
}

.admin-profile-menu-logout:hover {
    background: rgba(239,68,68,0.08);
    color: #EF4444;
}

/* ----- CONTENT ----- */
.admin-content {
    padding: 1.5rem;
}

.admin-section {
    display: none;
    animation: adminFadeIn 0.4s ease;
}

.admin-section.active {
    display: block;
}

@keyframes adminFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- WELCOME ----- */
.admin-welcome h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--admin-text);
    margin-bottom: 0.2rem;
}

.admin-welcome p {
    color: var(--admin-text-secondary);
    margin-bottom: 1.5rem;
}

/* ----- STATS ----- */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-stat-card {
    background: var(--admin-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--admin-transition);
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45,125,58,0.08);
}

.admin-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(45,125,58,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #2D7D3A;
    flex-shrink: 0;
}

.admin-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--admin-text);
    line-height: 1.1;
}

.admin-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--admin-text-secondary);
    font-weight: 500;
}

/* ----- ACTIVITY ----- */
.admin-recent-activity {
    background: var(--admin-card-bg);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
    margin-bottom: 1.5rem;
}

.admin-recent-activity h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--admin-text);
    margin-bottom: 0.75rem;
}

.admin-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--admin-text);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-activity-item:last-child {
    border-bottom: none;
}

.admin-activity-item i {
    width: 1.2rem;
    text-align: center;
}

.admin-activity-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--admin-text-secondary);
}

/* ----- QUICK ACTIONS ----- */
.admin-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ----- BUTTONS ----- */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    border-radius: 60px;
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    transition: var(--admin-transition);
    cursor: pointer;
    background: transparent;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.admin-btn-primary {
    background: #2D7D3A;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(45,125,58,0.3);
}

.admin-btn-primary:hover {
    background: #236B2E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45,125,58,0.35);
    color: #FFFFFF;
}

.admin-btn-outline {
    border: 1.5px solid var(--admin-border);
    color: var(--admin-text);
}

.admin-btn-outline:hover {
    border-color: #2D7D3A;
    color: #2D7D3A;
}

.admin-btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}

/* ----- FORM ----- */
.admin-form-group {
    margin-bottom: 1rem;
}

.admin-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--admin-text);
    margin-bottom: 0.3rem;
}

.admin-form-input {
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg);
    color: var(--admin-text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: var(--admin-transition);
    outline: none;
}

.admin-form-input:focus {
    border-color: #2D7D3A;
    box-shadow: 0 0 0 3px rgba(45,125,58,0.1);
}

.admin-password-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ----- TABLE ----- */
.admin-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-table-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--admin-text);
    margin: 0;
}

.admin-table-search {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    color: var(--admin-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
    min-width: 180px;
}

.admin-table-search:focus {
    border-color: #2D7D3A;
}

.admin-filter-select {
    padding: 0.4rem 1rem;
    border-radius: 60px;
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    color: var(--admin-text);
    font-size: 0.85rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.admin-table-wrapper {
    overflow-x: auto;
    background: var(--admin-card-bg);
    border-radius: 16px;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 700px;
}

.admin-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--admin-text-secondary);
    border-bottom: 2px solid var(--admin-border);
    background: var(--admin-bg);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text);
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: rgba(45,125,58,0.02);
}

.admin-table-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #E5E7EB;
    flex-shrink: 0;
}

.admin-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 60px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
}

.admin-badge-success {
    background: #DFF0E0;
    color: #236B2E;
}

.admin-badge-warning {
    background: #FEF3C7;
    color: #B45309;
}

.admin-badge-danger {
    background: #FEE2E2;
    color: #DC2626;
}

.admin-badge-info {
    background: #DBEAFE;
    color: #2563EB;
}

.admin-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.15rem 0.3rem;
    color: var(--admin-text-secondary);
    transition: var(--admin-transition);
    border-radius: 6px;
}

.admin-action-btn:hover {
    color: #2D7D3A;
    background: rgba(45,125,58,0.1);
}

/* ----- SETTINGS ----- */
.admin-settings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.admin-settings-card {
    background: var(--admin-card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
}

.admin-settings-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--admin-text);
    margin-bottom: 1rem;
}

.admin-settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-settings-toggle:last-child {
    border-bottom: none;
}

.admin-settings-toggle span {
    font-size: 0.9rem;
    color: var(--admin-text);
}

/* ----- TOGGLE ----- */
.admin-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.admin-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-toggle-slider {
    position: absolute;
    inset: 0;
    background: #9CA3AF;
    border-radius: 60px;
    transition: 0.3s ease;
}

.admin-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: 0.3s ease;
}

.admin-toggle input:checked + .admin-toggle-slider {
    background: #2D7D3A;
}

.admin-toggle input:checked + .admin-toggle-slider::before {
    transform: translateX(20px);
}

/* ----- MODAL ----- */
.admin-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.admin-modal-overlay.active {
    display: flex;
}

.admin-modal {
    background: var(--admin-card-bg);
    border-radius: 20px;
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    animation: adminModalIn 0.3s ease;
}

@keyframes adminModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

.admin-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--admin-text);
    margin: 0;
}

.admin-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--admin-text-secondary);
    cursor: pointer;
    transition: var(--admin-transition);
    line-height: 1;
}

.admin-modal-close:hover {
    color: var(--admin-text);
    transform: rotate(90deg);
}

.admin-modal-body {
    padding: 1.5rem;
    color: var(--admin-text);
}

.admin-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--admin-border);
    justify-content: flex-end;
}

/* ----- TOAST ----- */
.admin-toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    width: 100%;
}

.admin-toast {
    background: var(--admin-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: toastIn 0.4s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.admin-toast-success {
    border-left: 4px solid #10B981;
}

.admin-toast-error {
    border-left: 4px solid #EF4444;
}

.admin-toast-info {
    border-left: 4px solid #3B82F6;
}

.admin-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.admin-toast-success .admin-toast-icon {
    color: #10B981;
}

.admin-toast-error .admin-toast-icon {
    color: #EF4444;
}

.admin-toast-info .admin-toast-icon {
    color: #3B82F6;
}

.admin-toast-content {
    flex: 1;
}

.admin-toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--admin-text);
}

.admin-toast-message {
    font-size: 0.85rem;
    color: var(--admin-text-secondary);
}

.admin-toast-close {
    background: none;
    border: none;
    color: var(--admin-text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.2rem;
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.admin-notifications-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.admin-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-notification-item {
    background: var(--admin-card-bg);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-notification-item:hover {
    border-color: rgba(45,125,58,0.2);
}

.admin-notification-item.unread {
    border-left: 3px solid #2D7D3A;
    background: rgba(45,125,58,0.02);
}

.admin-notification-content {
    flex: 1;
}

.admin-notification-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--admin-text);
}

.admin-notification-message {
    font-size: 0.85rem;
    color: var(--admin-text-secondary);
    margin: 0.1rem 0;
}

.admin-notification-time {
    font-size: 0.7rem;
    color: var(--admin-text-secondary);
}

.admin-notification-actions {
    display: flex;
    gap: 0.4rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 992px) {
    .admin-sidebar {
        transform: translateX(-100%);
        width: var(--admin-sidebar-width);
        transition: transform var(--admin-transition);
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0 !important;
    }

    .admin-navbar-toggle {
        display: block;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .admin-settings-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .admin-navbar {
        padding: 0.5rem 0.75rem;
        gap: 0.3rem;
    }

    .admin-navbar-title {
        font-size: 0.9rem;
    }

    .admin-navbar-right {
        gap: 0.3rem;
    }

    .admin-search-wrapper {
        min-width: 100px;
        flex: 1;
        max-width: 150px;
    }

    .admin-search-input {
        font-size: 0.75rem;
        padding: 0.3rem 0.3rem;
    }

    .admin-navbar-btn {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .admin-profile-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .admin-profile-info {
        display: none;
    }

    .admin-profile-arrow {
        display: none;
    }

    .admin-content {
        padding: 0.75rem;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .admin-stat-card {
        padding: 0.6rem;
        gap: 0.5rem;
    }

    .admin-stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .admin-stat-number {
        font-size: 0.95rem;
    }

    .admin-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-table-search,
    .admin-filter-select {
        width: 100%;
        min-width: unset;
    }

    .admin-table {
        font-size: 0.75rem;
        min-width: 600px;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.4rem 0.6rem;
    }

    .admin-password-row {
        grid-template-columns: 1fr;
    }

    .admin-quick-actions {
        flex-direction: column;
    }

    .admin-quick-actions .admin-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-modal {
        margin: 0.5rem;
        max-height: 95vh;
    }

    .admin-modal-footer {
        flex-direction: column;
    }

    .admin-modal-footer .admin-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-toast-container {
        bottom: 1rem;
        right: 1rem;
        max-width: calc(100% - 2rem);
    }

    .admin-notification-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-notification-actions {
        width: 100%;
    }

    .admin-notification-actions .admin-btn {
        flex: 1;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .admin-navbar {
        padding: 0.4rem 0.5rem;
    }

    .admin-navbar-toggle {
        font-size: 1.1rem;
    }

    .admin-search-wrapper {
        min-width: 70px;
        max-width: 100px;
    }

    .admin-navbar-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .admin-profile-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .admin-stat-card {
        padding: 0.4rem;
        gap: 0.3rem;
    }

    .admin-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .admin-stat-number {
        font-size: 0.8rem;
    }

    .admin-table {
        font-size: 0.65rem;
        min-width: 500px;
    }

    .admin-action-btn {
        font-size: 0.8rem;
    }
}


/* Hide logo when sidebar is collapsed */
.admin-sidebar.collapsed .admin-sidebar-logo,
.farmer-sidebar.collapsed .farmer-sidebar-logo,
.buyer-sidebar.collapsed .buyer-sidebar-logo,
.logistics-sidebar.collapsed .logistics-sidebar-logo {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the collapse button stays visible */
.admin-sidebar.collapsed .admin-sidebar-collapse,
.farmer-sidebar.collapsed .farmer-sidebar-collapse,
.buyer-sidebar.collapsed .buyer-sidebar-collapse,
.logistics-sidebar.collapsed .logistics-sidebar-collapse {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Center the collapse button when sidebar is collapsed */
.admin-sidebar.collapsed .admin-sidebar-header,
.farmer-sidebar.collapsed .farmer-sidebar-header,
.buyer-sidebar.collapsed .buyer-sidebar-header,
.logistics-sidebar.collapsed .logistics-sidebar-header {
    justify-content: center !important;
    padding: 1.25rem 0.5rem !important;
}

/* ============================================================
   DARK MODE - ALL DASHBOARDS
   ============================================================ */

/* ----- ADMIN DASHBOARD DARK MODE ----- */
.admin-dark-mode {
    --admin-bg: #0A1A0E;
    --admin-card-bg: #0D2812;
    --admin-text: #F8F9FA;
    --admin-text-secondary: #9CA3AF;
    --admin-border: #1A3A22;
    --admin-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.admin-dark-mode .admin-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.admin-dark-mode .admin-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.admin-dark-mode .admin-stat-card,
.admin-dark-mode .admin-modal,
.admin-dark-mode .admin-settings-card,
.admin-dark-mode .admin-table,
.admin-dark-mode .admin-notification-item,
.admin-dark-mode .admin-recent-activity {
    background: #0D2812 !important;
    border-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

/* Fix for headings in dark mode */
.admin-dark-mode .admin-welcome h2,
.admin-dark-mode .admin-section h2,
.admin-dark-mode .admin-section-title,
.admin-dark-mode .admin-recent-activity h3,
.admin-dark-mode .admin-settings-card h3,
.admin-dark-mode .admin-table-header h2,
.admin-dark-mode .admin-modal-header h3 {
    color: #FFFFFF !important;
}

.admin-dark-mode .admin-welcome p,
.admin-dark-mode .admin-stat-label,
.admin-dark-mode .admin-text-secondary {
    color: #9CA3AF !important;
}

.admin-dark-mode .admin-stat-number {
    color: #FFFFFF !important;
}

.admin-dark-mode .admin-table th {
    border-bottom-color: #1A3A22 !important;
    color: #9CA3AF !important;
}

.admin-dark-mode .admin-table td {
    border-bottom-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

.admin-dark-mode .admin-form-input {
    background: #1A3A22 !important;
    border-color: #2A4F34 !important;
    color: #F8F9FA !important;
}

.admin-dark-mode .admin-modal-overlay {
    background: rgba(0,0,0,0.85) !important;
}

/* ----- FARMER DASHBOARD DARK MODE ----- */
.farmer-dark-mode {
    --farmer-bg: #0A1A0E;
    --farmer-card-bg: #0D2812;
    --farmer-text: #F8F9FA;
    --farmer-text-secondary: #9CA3AF;
    --farmer-border: #1A3A22;
    --farmer-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.farmer-dark-mode .farmer-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.farmer-dark-mode .farmer-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.farmer-dark-mode .farmer-stat-card,
.farmer-dark-mode .farmer-modal,
.farmer-dark-mode .farmer-settings-card,
.farmer-dark-mode .farmer-table,
.farmer-dark-mode .farmer-notification-item,
.farmer-dark-mode .farmer-recent-activity,
.farmer-dark-mode .farmer-preview-card,
.farmer-dark-mode .farmer-product-card {
    background: #0D2812 !important;
    border-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

/* Fix for headings in dark mode */
.farmer-dark-mode .farmer-welcome h2,
.farmer-dark-mode .farmer-section h2,
.farmer-dark-mode .farmer-section-title,
.farmer-dark-mode .farmer-recent-activity h3,
.farmer-dark-mode .farmer-settings-card h3,
.farmer-dark-mode .farmer-table-header h2,
.farmer-dark-mode .farmer-modal-header h3 {
    color: #FFFFFF !important;
}

.farmer-dark-mode .farmer-welcome p,
.farmer-dark-mode .farmer-stat-label,
.farmer-dark-mode .farmer-text-secondary {
    color: #9CA3AF !important;
}

.farmer-dark-mode .farmer-stat-number {
    color: #FFFFFF !important;
}

.farmer-dark-mode .farmer-table th {
    border-bottom-color: #1A3A22 !important;
    color: #9CA3AF !important;
}

.farmer-dark-mode .farmer-table td {
    border-bottom-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

.farmer-dark-mode .farmer-form-input,
.farmer-dark-mode .farmer-form-textarea {
    background: #1A3A22 !important;
    border-color: #2A4F34 !important;
    color: #F8F9FA !important;
}

.farmer-dark-mode .farmer-modal-overlay {
    background: rgba(0,0,0,0.85) !important;
}

/* ----- BUYER DASHBOARD DARK MODE ----- */
.buyer-dark-mode {
    --buyer-bg: #0A1A0E;
    --buyer-card-bg: #0D2812;
    --buyer-text: #F8F9FA;
    --buyer-text-secondary: #9CA3AF;
    --buyer-border: #1A3A22;
    --buyer-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.buyer-dark-mode .buyer-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.buyer-dark-mode .buyer-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.buyer-dark-mode .buyer-stat-card,
.buyer-dark-mode .buyer-modal,
.buyer-dark-mode .buyer-settings-card,
.buyer-dark-mode .buyer-table,
.buyer-dark-mode .buyer-notification-item,
.buyer-dark-mode .buyer-recent-activity,
.buyer-dark-mode .buyer-preview-card,
.buyer-dark-mode .buyer-saved-item,
.buyer-dark-mode .buyer-contact-item,
.buyer-dark-mode .buyer-review-item {
    background: #0D2812 !important;
    border-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

/* Fix for headings in dark mode */
.buyer-dark-mode .buyer-welcome h2,
.buyer-dark-mode .buyer-section h2,
.buyer-dark-mode .buyer-section-title,
.buyer-dark-mode .buyer-recent-activity h3,
.buyer-dark-mode .buyer-settings-card h3,
.buyer-dark-mode .buyer-table-header h2,
.buyer-dark-mode .buyer-modal-header h3 {
    color: #FFFFFF !important;
}

.buyer-dark-mode .buyer-welcome p,
.buyer-dark-mode .buyer-stat-label,
.buyer-dark-mode .buyer-text-secondary {
    color: #9CA3AF !important;
}

.buyer-dark-mode .buyer-stat-number {
    color: #FFFFFF !important;
}

.buyer-dark-mode .buyer-table th {
    border-bottom-color: #1A3A22 !important;
    color: #9CA3AF !important;
}

.buyer-dark-mode .buyer-table td {
    border-bottom-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

.buyer-dark-mode .buyer-form-input,
.buyer-dark-mode .buyer-form-textarea {
    background: #1A3A22 !important;
    border-color: #2A4F34 !important;
    color: #F8F9FA !important;
}

.buyer-dark-mode .buyer-modal-overlay {
    background: rgba(0,0,0,0.85) !important;
}

/* ----- LOGISTICS DASHBOARD DARK MODE ----- */
.logistics-dark-mode {
    --logistics-bg: #0A1A0E;
    --logistics-card-bg: #0D2812;
    --logistics-text: #F8F9FA;
    --logistics-text-secondary: #9CA3AF;
    --logistics-border: #1A3A22;
    --logistics-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.logistics-dark-mode .logistics-sidebar {
    background: #0A1A0E;
    border-right-color: #1A3A22;
}

.logistics-dark-mode .logistics-navbar {
    background: #0D2812;
    border-bottom-color: #1A3A22;
}

.logistics-dark-mode .logistics-stat-card,
.logistics-dark-mode .logistics-modal,
.logistics-dark-mode .logistics-settings-card,
.logistics-dark-mode .logistics-table,
.logistics-dark-mode .logistics-notification-item,
.logistics-dark-mode .logistics-recent-activity,
.logistics-dark-mode .logistics-preview-card,
.logistics-dark-mode .logistics-service-item,
.logistics-dark-mode .logistics-contact-item,
.logistics-dark-mode .logistics-review-item {
    background: #0D2812 !important;
    border-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

/* Fix for headings in dark mode */
.logistics-dark-mode .logistics-welcome h2,
.logistics-dark-mode .logistics-section h2,
.logistics-dark-mode .logistics-section-title,
.logistics-dark-mode .logistics-recent-activity h3,
.logistics-dark-mode .logistics-settings-card h3,
.logistics-dark-mode .logistics-table-header h2,
.logistics-dark-mode .logistics-modal-header h3 {
    color: #FFFFFF !important;
}

.logistics-dark-mode .logistics-welcome p,
.logistics-dark-mode .logistics-stat-label,
.logistics-dark-mode .logistics-text-secondary {
    color: #9CA3AF !important;
}

.logistics-dark-mode .logistics-stat-number {
    color: #FFFFFF !important;
}

.logistics-dark-mode .logistics-table th {
    border-bottom-color: #1A3A22 !important;
    color: #9CA3AF !important;
}

.logistics-dark-mode .logistics-table td {
    border-bottom-color: #1A3A22 !important;
    color: #F8F9FA !important;
}

.logistics-dark-mode .logistics-form-input,
.logistics-dark-mode .logistics-form-textarea {
    background: #1A3A22 !important;
    border-color: #2A4F34 !important;
    color: #F8F9FA !important;
}

.logistics-dark-mode .logistics-modal-overlay {
    background: rgba(0,0,0,0.85) !important;
}

/* ----- DARK MODE - GLOBAL FIXES ----- */
/* All headings white */
.admin-dark-mode h1,
.admin-dark-mode h2,
.admin-dark-mode h3,
.admin-dark-mode h4,
.farmer-dark-mode h1,
.farmer-dark-mode h2,
.farmer-dark-mode h3,
.farmer-dark-mode h4,
.buyer-dark-mode h1,
.buyer-dark-mode h2,
.buyer-dark-mode h3,
.buyer-dark-mode h4,
.logistics-dark-mode h1,
.logistics-dark-mode h2,
.logistics-dark-mode h3,
.logistics-dark-mode h4 {
    color: #FFFFFF !important;
}

/* All paragraph text */
.admin-dark-mode p,
.farmer-dark-mode p,
.buyer-dark-mode p,
.logistics-dark-mode p {
    color: #9CA3AF !important;
}

/* Stat labels */
.admin-dark-mode .admin-stat-label,
.farmer-dark-mode .farmer-stat-label,
.buyer-dark-mode .buyer-stat-label,
.logistics-dark-mode .logistics-stat-label {
    color: #9CA3AF !important;
}

/* Stat numbers */
.admin-dark-mode .admin-stat-number,
.farmer-dark-mode .farmer-stat-number,
.buyer-dark-mode .buyer-stat-number,
.logistics-dark-mode .logistics-stat-number {
    color: #FFFFFF !important;
}

/* Activity items */
.admin-dark-mode .admin-activity-item,
.farmer-dark-mode .farmer-activity-item,
.buyer-dark-mode .buyer-activity-item,
.logistics-dark-mode .logistics-activity-item {
    color: #F8F9FA !important;
    border-bottom-color: #1A3A22 !important;
}

.admin-dark-mode .admin-activity-time,
.farmer-dark-mode .farmer-activity-time,
.buyer-dark-mode .buyer-activity-time,
.logistics-dark-mode .logistics-activity-time {
    color: #9CA3AF !important;
}

/* Dark mode toggle slider */
.admin-dark-mode .admin-toggle-slider,
.farmer-dark-mode .farmer-toggle-slider,
.buyer-dark-mode .buyer-toggle-slider,
.logistics-dark-mode .logistics-toggle-slider {
    background: #1A3A22 !important;
}


/* ============================================================
   SAVE BUTTON - PRODUCT CARDS
   ============================================================ */

.home-featured-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #6B7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(4px);
}

.home-featured-save-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.home-featured-save-btn.saved {
    color: #EF4444;
    background: rgba(255, 255, 255, 0.95);
}

.home-featured-save-btn.saved:hover {
    color: #DC2626;
    transform: scale(1.08);
}

.home-featured-save-btn i {
    transition: all 0.3s ease;
    pointer-events: none;
}

.home-featured-save-btn.saved i {
    animation: heartPop 0.4s ease;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Position the save button properly on the card */
.home-featured-card {
    position: relative;
    overflow: visible;
}

/* Adjust badge position if save button is present */
.home-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .home-featured-save-btn {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================
   SAVE BUTTON - MARKETPLACE CARDS
   ============================================================ */

.marketplace-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #6B7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(4px);
}

.marketplace-save-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.marketplace-save-btn.saved {
    color: #EF4444;
    background: rgba(255, 255, 255, 0.95);
}

.marketplace-save-btn.saved:hover {
    color: #DC2626;
    transform: scale(1.08);
}

.marketplace-save-btn i {
    transition: all 0.3s ease;
    pointer-events: none;
}

.marketplace-save-btn.saved i {
    animation: heartPop 0.4s ease;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Position the save button properly on the card */
.marketplace-card {
    position: relative;
    overflow: visible;
}

/* Adjust badge position if save button is present */
.marketplace-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .marketplace-save-btn {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================
   SAVE BUTTON - SIMILAR PRODUCTS
   ============================================================ */

.detail-similar-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #6B7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(4px);
}

.detail-similar-save-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.detail-similar-save-btn.saved {
    color: #EF4444;
    background: rgba(255, 255, 255, 0.95);
}

.detail-similar-save-btn.saved:hover {
    color: #DC2626;
    transform: scale(1.08);
}

.detail-similar-save-btn i {
    transition: all 0.3s ease;
    pointer-events: none;
}

.detail-similar-save-btn.saved i {
    animation: heartPop 0.4s ease;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Position the save button properly on the card */
.detail-similar-card {
    position: relative;
    overflow: visible;
}

/* Adjust responsive */
@media screen and (max-width: 480px) {
    .detail-similar-save-btn {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================
   SAVE BUTTON - FARMER PRODUCTS
   ============================================================ */

.detail-similar-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #6B7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(4px);
}

.detail-similar-save-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.detail-similar-save-btn.saved {
    color: #EF4444;
    background: rgba(255, 255, 255, 0.95);
}

.detail-similar-save-btn.saved:hover {
    color: #DC2626;
    transform: scale(1.08);
}

.detail-similar-save-btn i {
    transition: all 0.3s ease;
    pointer-events: none;
}

.detail-similar-save-btn.saved i {
    animation: heartPop 0.4s ease;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Position the save button properly on the card */
.detail-similar-card {
    position: relative;
    overflow: visible;
}

/* Adjust responsive */
@media screen and (max-width: 480px) {
    .detail-similar-save-btn {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================
   PRODUCT DETAIL - FEATURED BADGE & SAVE BUTTON
   ============================================================ */

.detail-product-image-wrapper {
    position: relative;
    overflow: visible;
}

/* Featured Badge */
.detail-product-featured-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #2D7D3A;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 60px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 10px rgba(45, 125, 58, 0.3);
}

.detail-product-featured-badge i {
    font-size: 0.6rem;
}

/* Save Button - Top Right */
.detail-product-save-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #6B7280;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 6;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

.detail-product-save-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.detail-product-save-btn.saved {
    color: #EF4444;
    background: rgba(255, 255, 255, 0.95);
}

.detail-product-save-btn.saved:hover {
    color: #DC2626;
    transform: scale(1.08);
}

.detail-product-save-btn i {
    transition: all 0.3s ease;
    pointer-events: none;
}

.detail-product-save-btn.saved i {
    animation: heartPop 0.4s ease;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Adjust z-index to ensure save button is above featured badge if needed */
.detail-product-save-btn {
    z-index: 6;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .detail-product-save-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        top: 10px;
        right: 10px;
    }
    
    .detail-product-featured-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.6rem;
        top: 10px;
        left: 10px;
    }
}

/* ============================================================
   LOGISTICS PROFILE COMPLETION BAR
   ============================================================ */

.logistics-profile-completion {
    background: var(--logistics-card-bg, #FFFFFF);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--logistics-border, #E5E7EB);
    box-shadow: var(--logistics-shadow, 0 4px 16px rgba(0,0,0,0.04));
    margin-bottom: 1.5rem;
}

.logistics-completion-bar {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--logistics-text, #111827);
    margin-bottom: 0.3rem;
}

.logistics-completion-bar span:last-child {
    color: #2D7D3A;
}

.logistics-progress-track {
    height: 8px;
    background: var(--logistics-border, #E5E7EB);
    border-radius: 60px;
    overflow: hidden;
}

.logistics-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2D7D3A, #236B2E);
    border-radius: 60px;
    transition: width 0.6s ease;
}

/* Dark Mode */
.logistics-dark-mode .logistics-profile-completion {
    background: #0D2812;
    border-color: #1A3A22;
}

.logistics-dark-mode .logistics-completion-bar {
    color: #F8F9FA;
}

.logistics-dark-mode .logistics-progress-track {
    background: #1A3A22;
}