:root {
  --brand: #f47b20;
  --brand-dark: #d96512;
  --brand-soft: #fde7d2;
  --navy: #0c2340;
  --navy-soft: #163256;
  --accent: #f47b20;
  --ink: #0c2340;
  --muted: #5c6778;
  --bg: #dce1e6;
  --surface: #e8ecf0;
  --surface-2: #d3d9e0;
  --line: #c8ced6;
  --white: #e8ecf0;

  --bs-primary: #f47b20;
  --bs-primary-rgb: 244, 123, 32;
  --bs-body-bg: #dce1e6;
  --bs-body-color: #0c2340;
  --bs-secondary-color: #5c6778;
  --bs-border-color: #d5d8de;
  --bs-link-color: #d96512;
  --bs-link-color-rgb: 217, 101, 18;
  --bs-link-hover-color: #0c2340;
  --bs-link-hover-color-rgb: 12, 35, 64;
  --bs-emphasis-color: #0c2340;
  --bs-tertiary-bg: #e4e6ea;
}

html {
  color-scheme: light;
}

body {
  font-family: "Figtree", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, h4, h5, .navbar-brand, .hero-modern h1, .section-title {
  font-family: "Bricolage Grotesque", "Figtree", sans-serif;
  color: var(--navy);
  letter-spacing: -.02em;
}

/* Surfaces that used to be white */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item,
.form-control,
.form-select,
.bg-white,
.how-it-works-card,
.feature-card,
.testimonial-card,
.filter-form,
.listing-card,
.cta-card,
.faq-card,
.stats-card,
.form-section,
.truck-size-card {
  --bs-card-bg: var(--surface);
  --bs-body-bg: var(--surface);
  background-color: var(--surface) !important;
}

.card {
  border-color: var(--line) !important;
  color: var(--navy);
}

.bg-light,
.alert-light {
  background-color: var(--surface-2) !important;
}

.form-control,
.form-select {
  color: var(--navy);
  border-color: var(--line);
  background-color: var(--surface) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(244, 123, 32, .22);
}

/* Primary = orange, text on orange = navy */
.btn-primary {
  --bs-btn-color: var(--navy);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: 244, 123, 32;
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-color: var(--navy);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  color: var(--navy) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus {
  color: var(--navy) !important;
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-disabled-color: var(--muted);
  font-weight: 700;
}

.btn-navy {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: var(--brand);
  font-weight: 700;
}
.btn-navy:hover,
.btn-navy:focus {
  background: var(--navy-soft);
  border-color: var(--navy-soft);
  color: var(--brand);
}

.btn-outline-navy {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
}
.btn-outline-navy:hover,
.btn-outline-navy:focus {
  background: var(--navy);
  color: var(--brand);
}

.btn-light,
.btn-warning {
  --bs-btn-color: var(--navy);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: var(--surface-2);
  font-weight: 700;
}

.bg-primary,
.badge.bg-primary,
.card.bg-primary,
.card-header.bg-primary,
.list-group-item-primary {
  background-color: var(--brand) !important;
  color: var(--navy) !important;
}

.bg-primary .text-white,
.bg-primary.text-white,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary p,
.bg-primary a,
.bg-primary .lead,
.card-header.bg-primary,
.hero-section,
.seo-hero,
.listing-header,
.profile-header {
  color: var(--navy) !important;
}

.bg-primary .text-white-50,
.hero-modern .text-white-50,
.seo-hero .text-white-50,
.hero-section p {
  color: rgba(12, 35, 64, .72) !important;
}

.text-primary,
.link-primary,
a.link-primary {
  color: var(--brand) !important;
}

.border-primary {
  border-color: var(--brand) !important;
}

/* Navbar: orange ground, navy type */
.navbar.navbar-brand-dark,
.navbar.bg-primary {
  background-color: var(--brand) !important;
}

.navbar-brand-dark .navbar-brand,
.navbar-brand-dark .nav-link,
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link {
  color: var(--navy) !important;
  font-weight: 600;
}

.navbar-brand-dark .nav-link:hover,
.navbar-brand-dark .nav-link:focus,
.navbar-brand-dark .nav-link.active {
  color: var(--navy-soft) !important;
  opacity: .86;
}

.navbar-brand-dark .navbar-toggler {
  border-color: rgba(12, 35, 64, .28);
}

.navbar-brand-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(12, 35, 64, 0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand-dark .btn-outline-light {
  color: var(--navy);
  border-color: var(--navy);
  background: transparent;
}
.navbar-brand-dark .btn-outline-light:hover {
  background: var(--navy);
  color: var(--brand);
  border-color: var(--navy);
}

.navbar-brand-dark .btn-light {
  background: var(--surface);
  color: var(--navy);
  border-color: transparent;
}

.token-chip {
  background: rgba(12, 35, 64, .1);
  color: var(--navy);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  border: 1px solid rgba(12, 35, 64, .18);
}
.token-chip small {
  font-size: 10px;
  opacity: .85;
  font-weight: 600;
}
.token-chip:hover {
  background: rgba(12, 35, 64, .16);
  color: var(--navy);
}

/* Homepage hero: light gray, calm and simple */
.hero-modern {
  background-color: var(--bg);
  background-image: none;
  color: var(--navy);
  padding: 88px 0 96px;
  text-shadow: none;
  position: relative;
  border-bottom: 1px solid var(--line);
}

.hero-modern h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--navy);
}

.hero-kicker {
  color: var(--brand);
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 13px;
}

.hero-modern .hero-lead,
.hero-modern .text-white-50 {
  color: var(--muted) !important;
}

.hero-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 20px;
  padding: 24px;
  color: var(--navy);
  box-shadow: 0 14px 40px rgba(12, 35, 64, .06);
}

.stat-mini {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--line);
}
.stat-mini b { display: block; font-size: 1.2rem; color: var(--navy); }
.stat-mini span { color: rgba(12, 35, 64, .72); font-size: .82rem; }

.section-title {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}

.how-it-works-card,
.feature-card,
.testimonial-card,
.card {
  border-radius: 16px;
}

.how-it-works-icon,
.feature-icon {
  color: var(--brand) !important;
}

/* Listing / SEO / profile banners that were blue gradients */
.hero-section,
.seo-hero,
.profile-header {
  background: var(--bg) !important;
  color: var(--navy) !important;
  border-bottom: 1px solid var(--line);
}

.listing-header {
  background: var(--brand) !important;
  color: var(--navy) !important;
}

.hero-section a,
.seo-hero a,
.seo-hero .breadcrumb-item a,
.seo-hero .breadcrumb-item.active {
  color: var(--navy) !important;
}

.route-arrow,
.truck-icon,
.info-icon,
.stats-number {
  color: var(--brand) !important;
}

.progress-bar,
.btn-register,
.cargo-household {
  background: var(--brand) !important;
  color: var(--navy) !important;
}

/* Bootstrap "success" green clashes with the orange/navy palette */
.bg-success,
.badge.bg-success,
.card-header.bg-success,
.list-group-item-success {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

.alert-success {
  background-color: #e4eaf1 !important;
  border-color: var(--navy) !important;
  color: var(--navy) !important;
}

.btn-success {
  --bs-btn-color: var(--brand);
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-color: var(--brand);
  --bs-btn-hover-bg: var(--navy-soft);
  --bs-btn-hover-border-color: var(--navy-soft);
  --bs-btn-active-color: var(--brand);
  --bs-btn-active-bg: var(--navy-soft);
  --bs-btn-active-border-color: var(--navy-soft);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-bg: var(--navy);
  --bs-btn-disabled-border-color: var(--navy);
  color: var(--brand) !important;
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  font-weight: 700;
}
.btn-success:hover,
.btn-success:focus {
  color: var(--brand) !important;
  background-color: var(--navy-soft) !important;
  border-color: var(--navy-soft) !important;
}

.btn-outline-success {
  color: var(--navy) !important;
  border-color: var(--navy) !important;
  background: transparent !important;
  font-weight: 700;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  color: var(--brand) !important;
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}

.text-success {
  color: var(--navy) !important;
}

.bg-navy {
  background-color: var(--navy) !important;
  color: #fff !important;
}

.offer-count,
.cargo-packaged {
  background: var(--navy) !important;
  color: #fff !important;
}

/* Keep WhatsApp's official green */
.fa-whatsapp,
.fab.fa-whatsapp {
  color: #25d366 !important;
}

.btn-register:hover {
  background: var(--brand-dark) !important;
  color: var(--navy) !important;
}

.listing-card:hover {
  box-shadow: 0 8px 25px rgba(244, 123, 32, .18) !important;
}

.footer {
  background-color: var(--navy) !important;
}

.footer a:hover,
.footer .social-icons a:hover {
  color: var(--brand) !important;
}

.pwa-install-prompt {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1080;
  background: var(--navy);
  color: var(--brand);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(12, 35, 64, .28);
}

/* Auth screens */
.auth-shell {
  padding: 12px 0 32px;
}
.auth-card {
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(12, 35, 64, .08) !important;
  background: var(--surface) !important;
}
.auth-brand-mark {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--brand);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  margin-bottom: 16px;
}
.auth-input-group .input-group-text {
  background: var(--bg);
  border-color: var(--line);
  color: var(--brand);
  min-width: 48px;
  justify-content: center;
}
.auth-input-group .form-control,
.auth-input-group .form-select {
  min-height: 48px;
  border-color: var(--line);
}
.auth-input-group .btn {
  border-color: var(--line);
  color: var(--navy);
  min-width: 48px;
}
.auth-input-group .btn:hover {
  background: var(--bg);
  color: var(--brand);
}
.auth-submit {
  min-height: 50px;
  border-radius: 14px;
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    padding: 8px 0 12px;
  }
  .navbar-nav {
    align-items: stretch !important;
    width: 100%;
    gap: 6px;
  }
  .navbar-nav .nav-item,
  .navbar-nav .nav-link,
  .navbar-nav .btn,
  .navbar-nav form {
    width: 100%;
  }
  .navbar-nav .nav-link {
    padding: 12px 14px !important;
    border-radius: 12px;
    background: rgba(12, 35, 64, .06);
  }
  .navbar-nav .btn-navy,
  .navbar-nav .btn-outline-light {
    display: block;
    text-align: center;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .token-chip {
    width: 100%;
    justify-content: center;
  }
  .hero-modern { padding: 36px 0 40px; }
  .hero-modern .d-flex.gap-2 {
    flex-direction: column;
  }
  .hero-modern .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-card { margin-top: 4px; }
  .auth-shell .p-5 {
    padding: 1.5rem !important;
  }
  .form-control,
  .form-select,
  .btn {
    min-height: 44px;
  }
  .filter-form .btn,
  .listing-card .btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-modern { padding: 32px 0 36px; }
  .hero-modern h1 { font-size: 1.85rem; }
  body { overflow-x: hidden; }
}