/* ═══════════════════════════════════════════════════════════
   QARIBIA — Safari & Tour operator additions
   -----------------------------------------------------------------
   Loaded after operator.css. Only styles what the safari dashboard and
   bookings view need that the property views don't have: the departures
   list and the payment-state chips. Everything else reuses the existing
   kpi-card / dash-panel / bookings-table classes on purpose.
   ══════════════════════════════════════════════════════════ */

/* ── Upcoming departures ───────────────────────────────── */
.dep-list { display: flex; flex-direction: column; }

.dep-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dep-row:last-child { border-bottom: none; padding-bottom: 2px; }
.dep-row:first-child { padding-top: 4px; }

.dep-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 12px;
  background: rgba(200, 150, 62, 0.1);
  color: var(--gold-dark);
  font-family: var(--font-heading);
  line-height: 1;
}
.dep-date strong { font-size: 1.15rem; font-weight: 700; }
.dep-date span { margin-top: 3px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.dep-body { min-width: 0; }
.dep-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dep-meta { margin-top: 2px; font-size: 0.78rem; color: var(--text-muted); }

.dep-bar {
  margin-top: 9px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.dep-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--amber));
}

.dep-tag {
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.dep-tag--amber { background: rgba(224, 123, 57, 0.12); color: #B85A1F; }
.dep-tag--teal  { background: rgba(27, 107, 114, 0.12); color: var(--teal); }
.dep-tag--muted { background: rgba(0, 0, 0, 0.05); color: var(--text-muted); }

.dep-empty { padding: 18px 0 6px; font-size: 0.86rem; color: var(--text-muted); }

/* ── Payment state chip (bookings table) ───────────────── */
.tb-pay {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.tb-pay--green { background: rgba(45, 90, 66, 0.12); color: var(--forest); }
.tb-pay--amber { background: rgba(224, 123, 57, 0.12); color: #B85A1F; }
.tb-pay--muted { background: rgba(0, 0, 0, 0.05); color: var(--text-muted); }
.tb-pay__sub { margin-top: 4px; font-size: 0.72rem; color: var(--text-muted); }

/* ── Booking detail additions ──────────────────────────── */
.tb-schedule { margin-top: 12px; }
.tb-note {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.tb-note i { margin-top: 2px; color: var(--teal); }

@media (max-width: 640px) {
  .dep-row { grid-template-columns: 46px 1fr; }
  .dep-tag { grid-column: 2; justify-self: start; }
}

/* ── Listing card: what the product bundles ────────────────
   The "2 nights / Stay included / Transport" row on a safari's card. Was
   unstyled, so the items ran together at body-text size. Small chips that
   wrap onto a second line instead of colliding. */
.listing-card__bundle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
}
.listing-card__bundle span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(200, 150, 62, 0.1);
  color: var(--gold-dark);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
}
.listing-card__bundle i { font-size: 0.68rem; flex-shrink: 0; }