/* ============================================================
   public/css/staysource-partner-guarantee-badge.css

   Shared availability-badge legend component — the ONE definition used by
   both the admin Partner Page setup modal (public/index.html, linked
   relatively) and the public-facing Partner Page itself
   (src/utils/renderPartnerPage.js, linked absolutely at /css/...), so the
   swatch colours are guaranteed to match in both places rather than being
   two independent implementations.

   Colours are the exact GREEN/ORANGE/grey-unavailable values already
   established by the StaySource date-picker's status convention — see
   staysource-partner-datepicker.css's --dp-green/--dp-orange/--dp-neutral.
   Reused verbatim here (not approximated) under new --pp-guarantee-* names
   so this file has no hard dependency on the datepicker file being loaded
   on the same page.
   ============================================================ */

:root {
  --pp-guarantee-green: #27ae60;
  --pp-guarantee-orange: #e67e22;
  --pp-guarantee-grey: #9aa3af;
  /* Not part of the 3-row legend above (Green/Orange/Grey only) — added for
     the Existing Reservations ss_booked_status badge (migration 0186), which
     reuses this same swatch component. 'red' is a safety-valve/anomaly value
     that should not normally occur (see that migration's header comment), so
     it needs its own visible colour rather than falling back to grey. Value
     matches the RED already used throughout StaySource (staysource-house-
     threshold.css --ht-red, staysource-partner-datepicker.css --dp-red). */
  --pp-guarantee-red: #d63031;
  /* Booking-type badge (Existing Reservations, Step 6C, Q12) — a different
     axis entirely from the green/orange/red/grey guarantee-status colours
     above (ssBookedStatus: is this reservation guaranteed?) vs this one
     (ssBookingType: what kind of rate is it on?), so it deliberately does
     NOT reuse any of those four values — a row showing both badges at once
     must not read as if they're the same signal repeated. No color was
     specified in the confirmed spec; chosen to fit this app's existing
     StaySource navy/gold brand pair (--dp-navy/--dp-gold,
     staysource-partner-datepicker.css) plus one new accent for the
     in-between (Hybrid/"Combined") case. */
  --pp-booking-type-static: #5a6472;
  --pp-booking-type-dynamic: #C8A96E;
  --pp-booking-type-hybrid: #6c5ce7;
}

.pp-guarantee-badge {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.pp-guarantee-badge--green { background: var(--pp-guarantee-green); }
.pp-guarantee-badge--orange { background: var(--pp-guarantee-orange); }
.pp-guarantee-badge--grey { background: var(--pp-guarantee-grey); }
.pp-guarantee-badge--red { background: var(--pp-guarantee-red); }
.pp-guarantee-badge--static { background: var(--pp-booking-type-static); }
.pp-guarantee-badge--dynamic-access { background: var(--pp-booking-type-dynamic); }
.pp-guarantee-badge--hybrid { background: var(--pp-booking-type-hybrid); }

.pp-guarantee-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-guarantee-row + .pp-guarantee-row {
  margin-top: 12px;
}

.pp-guarantee-text {
  font-size: 0.9rem;
  line-height: 1.4;
}