/* ========================================================================== 
   Earthy Shared Design Tokens & Components
   Cross-project style foundation aligned with About + Landing redesign
   ========================================================================== */

:root {
  /* Core earthy palette */
  --earthy-primary: #8a7869;
  --earthy-primary-hover: #6f6053;
  --earthy-primary-soft: #cec1b3;
  --earthy-primary-soft-hover: #c2b2a2;
  --earthy-surface-1: #f3efe9;
  --earthy-surface-2: #ece6df;
  --earthy-surface-3: #d3c6b8;
  --earthy-text: #1d1d21;
  --earthy-text-muted: #6f655d;
  --earthy-border: rgba(58, 49, 40, 0.14);

  /* Semantic earthy accents for badges/states */
  --earthy-success: #7f8f72;
  --earthy-warning: #b78f57;
  --earthy-info: #7f8d98;
  --earthy-danger: #9a5b53;
  --earthy-secondary: #3d352e;
  --earthy-cta-green: #2e7d32;
  --earthy-cta-green-hover: #1b5e20;
  --earthy-accent-orange: #b98654;
  --earthy-accent-purple: #593d86;

  /* Matches-tab specific accents — kept in palette so the dashboard chip
     row, pair link and mutual-interest border don't drift toward
     non-earthy hues over time. */
  --earthy-matches-mutual: #c79a3e; /* warm gold for "🤝 mutual interest" */
  --earthy-matches-pair-bg: rgba(127, 141, 152, 0.12); /* tinted info */
  --earthy-matches-pair-border: rgba(127, 141, 152, 0.45);
  --earthy-matches-pair-text: var(--earthy-info);
  --earthy-matches-flash: rgba(127, 141, 152, 0.55);

  /* Legacy alias tokens used by older utility classes/components. */
  --color-orange: var(--earthy-accent-orange);
  --color-purple: var(--earthy-accent-purple);

  /* Reusable geometry */
  --earthy-radius-pill: 999px;
  --earthy-radius-md: 0.75rem;

  /* Sticky-positioned UI offsets — keep in sync with the navbar height so
     sticky elements (filter sidebar, etc.) don't tuck under the navbar. */
  --navbar-height: 80px;
  --sticky-top-offset: var(--navbar-height);
}

[data-theme="dark"] {
  --earthy-primary: #9b8979;
  --earthy-primary-hover: #b8a99b;
  --earthy-primary-soft: #6f6053;
  --earthy-primary-soft-hover: #8a7869;
  --earthy-surface-1: #1f1e23;
  --earthy-surface-2: #252228;
  --earthy-surface-3: #2c2621;
  --earthy-text: #efe8df;
  --earthy-text-muted: #cabfb4;
  --earthy-border: rgba(255, 255, 255, 0.14);

  --earthy-success: #8f9f82;
  --earthy-warning: #d0ab76;
  --earthy-info: #9aa8b4;
  --earthy-danger: #b4766d;
  --earthy-secondary: #8a7869;
  --earthy-cta-green: #2e7d32;
  --earthy-cta-green-hover: #1b5e20;
  --earthy-accent-orange: #c89a69;
  --earthy-accent-purple: #593d86;

  /* Dark-mode counterparts for matches accents (gold + tinted info) */
  --earthy-matches-mutual: #d5b25b;
  --earthy-matches-pair-bg: rgba(154, 168, 180, 0.15);
  --earthy-matches-pair-border: rgba(154, 168, 180, 0.55);
  --earthy-matches-pair-text: var(--earthy-info);
  --earthy-matches-flash: rgba(154, 168, 180, 0.55);

  --color-orange: var(--earthy-accent-orange);
  --color-purple: var(--earthy-accent-purple);
}

/* Bootstrap variable harmonization */
:root,
[data-theme="dark"] {
  --bs-primary: var(--earthy-primary);
  --bs-primary-rgb: 138, 120, 105;
  --bs-secondary: var(--earthy-secondary);
  --bs-secondary-rgb: 61, 53, 46;
  --bs-success: var(--earthy-success);
  --bs-success-rgb: 127, 143, 114;
  --bs-focus-ring-color: rgba(138, 120, 105, 0.25);
  --bs-dropdown-link-hover-bg: var(--earthy-primary-soft);
  --bs-dropdown-link-hover-color: var(--earthy-text);
  --bs-dropdown-link-active-bg: var(--earthy-primary);
  --bs-dropdown-link-active-color: #fff;
  --bs-form-select-focus-border-color: var(--earthy-primary);
  --bs-form-select-focus-box-shadow: 0 0 0 0.2rem rgba(138, 120, 105, 0.25);
  --bs-form-check-input-checked-bg-color: var(--earthy-primary);
  --bs-form-check-input-checked-border-color: var(--earthy-primary);
}

/* Shared button foundation (opt-in classes) */
.btn-earthy-pill {
  border-radius: var(--earthy-radius-pill);
  font-weight: 650;
}

.btn-earthy-primary {
  background: var(--earthy-primary);
  border: 1px solid var(--earthy-primary);
  color: #fff;
}

.btn-earthy-primary:hover,
.btn-earthy-primary:focus {
  background: var(--earthy-primary-hover);
  border-color: var(--earthy-primary-hover);
  color: #fff;
}

.btn-earthy-secondary {
  background: var(--earthy-primary-soft);
  border: 1px solid var(--earthy-primary-soft);
  color: var(--earthy-text);
}

.btn-earthy-secondary:hover,
.btn-earthy-secondary:focus {
  background: var(--earthy-primary-soft-hover);
  border-color: var(--earthy-primary-soft-hover);
  color: var(--earthy-text);
}

.btn-earthy-outline {
  background: transparent;
  border: 1px solid var(--earthy-primary);
  color: var(--earthy-primary);
}

.btn-earthy-outline:hover,
.btn-earthy-outline:focus {
  background: var(--earthy-primary);
  border-color: var(--earthy-primary);
  color: #fff;
}

/* Bootstrap button harmonization for project-wide consistency */
.btn-primary {
  background-color: var(--earthy-primary);
  border-color: var(--earthy-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--earthy-primary-hover);
  border-color: var(--earthy-primary-hover);
  color: #fff;
}

.btn-success,
button.btn-success,
a.btn-success {
  background-color: var(--earthy-cta-green) !important;
  border-color: var(--earthy-cta-green) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
button.btn-success:hover,
a.btn-success:hover {
  background-color: var(--earthy-cta-green-hover) !important;
  border-color: var(--earthy-cta-green-hover) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-dark {
  background-color: var(--earthy-secondary);
  border-color: var(--earthy-secondary);
  color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background-color: var(--earthy-primary);
  border-color: var(--earthy-primary);
  color: #fff;
}

.btn-outline-primary,
.btn-outline-secondary {
  border-color: var(--earthy-primary);
  color: var(--earthy-primary);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning {
  --bs-btn-active-bg: var(--earthy-primary);
  --bs-btn-active-border-color: var(--earthy-primary);
  --bs-btn-active-color: #fff;
}

.btn-outline-success {
  color: var(--earthy-cta-green);
  border-color: var(--earthy-cta-green);
  --bs-btn-active-bg: var(--earthy-cta-green);
  --bs-btn-active-border-color: var(--earthy-cta-green);
  --bs-btn-active-color: #fff;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
  background-color: var(--earthy-cta-green);
  border-color: var(--earthy-cta-green);
  color: #fff;
}

.text-success:not(.badge):not(.btn),
.text-success-emphasis {
  color: var(--earthy-success) !important;
}

[data-theme="dark"] {
  --bs-success-rgb: 143, 159, 130;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--earthy-primary);
  border-color: var(--earthy-primary);
  color: #fff;
}

/* Shared badge styling */
.badge {
  border-radius: var(--earthy-radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge.bg-primary { background-color: var(--earthy-primary) !important; }
.badge.bg-secondary,
.badge.bg-dark { background-color: var(--earthy-secondary) !important; }
.badge.bg-success { background-color: var(--earthy-success) !important; }
.badge.bg-warning { background-color: var(--earthy-warning) !important; color: #1d1d21 !important; }
.badge.bg-info { background-color: var(--earthy-info) !important; }
.badge.bg-danger { background-color: var(--earthy-danger) !important; }

.badge-earthy {
  background: var(--earthy-primary);
  color: #fff;
}

.badge-earthy-soft {
  background: var(--earthy-primary-soft);
  color: var(--earthy-text);
}

/* Neutral contextual surfaces for cards/sections */
.surface-earthy-1 { background: var(--earthy-surface-1); }
.surface-earthy-2 { background: var(--earthy-surface-2); }
.surface-earthy-3 { background: var(--earthy-surface-3); }
.text-earthy-muted { color: var(--earthy-text-muted); }

/* Global card header unification across project pages. */
.card-header {
  background-color: var(--earthy-primary) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--earthy-border);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title,
.card-header .mb-0 {
  color: inherit !important;
}

[data-theme="dark"] .card-header {
  background-color: var(--earthy-primary) !important;
  color: #fff !important;
}

/* Global dropdown/select de-blueing for search/sort and create forms. */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--earthy-primary-soft) !important;
  color: var(--earthy-text) !important;
}

.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--earthy-primary) !important;
  color: #fff !important;
}

.form-select:focus,
.form-control:focus {
  border-color: var(--earthy-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(138, 120, 105, 0.25) !important;
}

option:checked {
  background-color: var(--earthy-primary);
  color: #fff;
}

/* Global earthy checked/active controls to replace Bootstrap blue defaults. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--earthy-primary);
}

.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: var(--earthy-primary);
  border-color: var(--earthy-primary);
}

.form-check-input:focus {
  border-color: var(--earthy-primary);
  box-shadow: 0 0 0 0.2rem rgba(138, 120, 105, 0.25);
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background-color: var(--earthy-primary);
  border-color: var(--earthy-primary);
  color: #fff;
}

/* Wanted equipment "must-have" star — neutral grey instead of bootstrap yellow.
   Checked state is covered by the .btn-check:checked rule above (earthy brown). */
.equipment-required-label.btn-outline-warning {
  --bs-btn-color: var(--earthy-info);
  --bs-btn-border-color: var(--earthy-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--earthy-info);
  --bs-btn-hover-border-color: var(--earthy-info);
}

/* Navbar primary CTA (SWAP YOUR RIDE) unified to earthy green. */
.navbar .create-listing-btn,
.navbar-earthy .create-listing-btn,
.navbar .btn-success.create-listing-btn,
.navbar-earthy .btn-success.create-listing-btn {
  background-color: var(--earthy-cta-green) !important;
  border-color: var(--earthy-cta-green) !important;
  color: #fff !important;
}

.navbar .create-listing-btn:hover,
.navbar-earthy .create-listing-btn:hover,
.navbar .btn-success.create-listing-btn:hover,
.navbar-earthy .btn-success.create-listing-btn:hover,
.navbar .create-listing-btn:focus,
.navbar-earthy .create-listing-btn:focus,
.navbar .btn-success.create-listing-btn:focus,
.navbar-earthy .btn-success.create-listing-btn:focus {
  background-color: var(--earthy-cta-green-hover) !important;
  border-color: var(--earthy-cta-green-hover) !important;
  color: #fff !important;
}

/* ==========================================================================
   Earthy Modal — shared design language for app modals
   Opt-in: add the `earthy-modal` class on `.modal.fade`. Theming is fully
   token-driven, so dark mode follows the --earthy-* overrides automatically.
   ========================================================================== */
.earthy-modal .modal-content {
  background: var(--earthy-surface-1);
  color: var(--earthy-text);
  border: none;
  border-radius: 1.3rem;
  overflow: hidden;
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.45);
}

/* Header bar */
.earthy-modal .modal-header {
  background: var(--earthy-surface-2);
  border-bottom: 1px solid var(--earthy-border);
  padding: 1rem 1.4rem;
}
.earthy-modal .modal-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--earthy-text);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.earthy-modal .modal-title i {
  color: var(--earthy-primary);
}
.earthy-modal__close {
  background: transparent;
  border: none;
  color: var(--earthy-text-muted);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.earthy-modal__close:hover {
  opacity: 1;
  background: var(--earthy-border);
  color: var(--earthy-text);
}

/* Body + footer */
.earthy-modal .modal-body {
  padding: 1.4rem;
}
.earthy-modal .modal-footer {
  border-top: 1px solid var(--earthy-border);
  padding: 1rem 1.4rem;
}

/* Section label inside an earthy modal */
.earthy-modal__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--earthy-text-muted);
  margin-bottom: 0.4rem;
}
.earthy-modal__label .earthy-modal__optional {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}

/* Inputs */
.earthy-modal .form-control {
  background: #fff;
  border: 1px solid var(--earthy-border);
  border-radius: var(--earthy-radius-md);
  color: var(--earthy-text);
}
[data-theme="dark"] .earthy-modal .form-control {
  background: var(--earthy-surface-2);
}
.earthy-modal .form-control:focus {
  border-color: var(--earthy-primary);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
.earthy-modal .form-text {
  color: var(--earthy-text-muted);
}

/* Pill buttons */
.earthy-modal .btn-earthy-primary {
  background: var(--earthy-primary);
  color: #fff;
  border: none;
  border-radius: var(--earthy-radius-pill);
  padding: 0.6rem 1.4rem;
  font-weight: 700;
}
.earthy-modal .btn-earthy-primary:hover,
.earthy-modal .btn-earthy-primary:focus {
  background: var(--earthy-primary-hover);
  color: #fff;
}
.earthy-modal .btn-earthy-primary:disabled {
  opacity: 0.55;
}
.earthy-modal .btn-earthy-ghost {
  background: transparent;
  color: var(--earthy-text-muted);
  border: 1px solid var(--earthy-border);
  border-radius: var(--earthy-radius-pill);
  padding: 0.6rem 1.3rem;
  font-weight: 600;
}
.earthy-modal .btn-earthy-ghost:hover {
  background: var(--earthy-surface-2);
  color: var(--earthy-text);
}

/* Dark "reveal" note card (contact-lock message) */
.earthy-modal__note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--earthy-secondary);
  color: #fff;
  border-radius: var(--earthy-radius-md);
  padding: 0.85rem 1.05rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.earthy-modal__note i {
  color: var(--earthy-primary-soft);
  font-size: 1.05rem;
}

/* ── Mini listing card (thumbnail + title + price) ── */
.earthy-mini-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid var(--earthy-border);
  border-radius: var(--earthy-radius-md);
  padding: 0.6rem 0.75rem;
}
[data-theme="dark"] .earthy-mini-card {
  background: var(--earthy-surface-2);
}
.earthy-mini-card__thumb {
  width: 52px;
  height: 52px;
  border-radius: 0.55rem;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--earthy-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--earthy-text-muted);
}
.earthy-mini-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.earthy-mini-card__body {
  min-width: 0;
  flex: 1;
}
.earthy-mini-card__title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
  color: var(--earthy-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.earthy-mini-card__price {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--earthy-primary);
}

/* ── Selectable swap-offer rows (radio-backed mini cards) ── */
.earthy-offer-option {
  display: block;
  margin-bottom: 0.55rem;
}
.earthy-offer-option:last-child {
  margin-bottom: 0;
}
.earthy-offer-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.earthy-offer-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1.5px solid var(--earthy-border);
  border-radius: var(--earthy-radius-md);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.earthy-offer-card:hover {
  border-color: var(--earthy-primary-soft);
}
.earthy-offer-option input:checked + .earthy-offer-card {
  border-color: var(--earthy-primary);
  background: rgba(138, 120, 105, 0.08);
}
.earthy-offer-option input:focus-visible + .earthy-offer-card {
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
.earthy-offer-card__check {
  margin-left: auto;
  color: var(--earthy-primary);
  opacity: 0;
  flex-shrink: 0;
}
.earthy-offer-option input:checked + .earthy-offer-card .earthy-offer-card__check {
  opacity: 1;
}
.earthy-offer-card__none {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--earthy-text-muted);
}