/* Shared product-page skin on top of style.css — trips, forms, cards */
@import url('/assets/css/hh-tokens.css');

body {
  background: linear-gradient(180deg, var(--hh-bg-1), var(--hh-bg-2)) !important;
  font-family: var(--hh-font) !important;
  color: var(--hh-ink);
}

.container .dashboard,
.trips-page,
.trip-form-container,
.main-content,
.page-content {
  font-family: var(--hh-font);
}

.trip-card,
.trip-card-modern,
.info-card,
.card {
  border-radius: var(--hh-radius-lg) !important;
  border: 1px solid rgba(15, 42, 50, 0.08) !important;
  box-shadow: var(--hh-shadow) !important;
  background: var(--hh-surface) !important;
}

.trip-card:hover,
.trip-card-modern:hover {
  border-color: rgba(0, 132, 255, 0.35) !important;
  box-shadow: 0 10px 28px rgba(0, 132, 255, 0.1) !important;
}

.section-header h2 {
  color: var(--hh-ink) !important;
  font-weight: 800;
}

.btn,
.btn-primary,
button.btn {
  border-radius: var(--hh-radius) !important;
  font-family: var(--hh-font) !important;
  font-weight: 700 !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  border-radius: 12px !important;
  border-color: var(--hh-line) !important;
  background: var(--hh-field) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 132, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.12) !important;
}

.badge,
.status-badge {
  border-radius: 999px !important;
}

/* Trips — role / status badges */
.role-badge {
  background: linear-gradient(135deg, var(--hh-accent), var(--hh-teal)) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0, 132, 255, 0.3) !important;
}

.role-badge.passenger {
  background: linear-gradient(135deg, var(--hh-warn), #d97706) !important;
  box-shadow: 0 4px 10px rgba(180, 83, 9, 0.25) !important;
}

.visibility-badge.public,
.trip-status.public {
  background: rgba(0, 166, 156, 0.12) !important;
  color: #008f86 !important;
  border-color: rgba(0, 166, 156, 0.25) !important;
}

.status-badge.active,
.info-card .status-badge {
  background: linear-gradient(135deg, var(--hh-accent), var(--hh-teal)) !important;
  color: #fff !important;
}

.status-badge.approved {
  background: linear-gradient(135deg, var(--hh-accent), var(--hh-teal)) !important;
  color: #fff !important;
}

.status-badge.pending {
  background: rgba(180, 83, 9, 0.12) !important;
  color: var(--hh-warn) !important;
}

/* Create-trip hero accents (overrides purple in style.css) */
.create-trip-hero {
  background: linear-gradient(135deg, rgba(0, 132, 255, 0.92) 0%, rgba(0, 166, 156, 0.92) 100%) !important;
}

.create-trip-hero .hero-icon,
.create-trip-hero .floating-card {
  box-shadow: 0 8px 24px rgba(0, 132, 255, 0.25);
}

.form-header {
  background: linear-gradient(135deg, var(--hh-accent) 0%, var(--hh-accent-2) 100%) !important;
}

.progress-fill {
  background: linear-gradient(90deg, var(--hh-accent), var(--hh-teal)) !important;
}