/*!
 * Quibble Direct widget styles.
 *
 * Deliberately small and deliberately unopinionated: this renders inside a
 * client's own booking page, next to their brand, and a widget that fights the
 * host page's design is a widget they uninstall. Everything inherits the host
 * font. Colours are custom properties so a client can retheme without us
 * shipping a per-customer stylesheet (which is how our competitor ended up with
 * a `12w.css` full of one-off selectors like `.vacasa-rate-card`).
 */
.qd-widget {
  --qd-accent: #0f766e;
  --qd-ink: #111827;
  --qd-muted: #6b7280;
  --qd-line: #e5e7eb;
  --qd-bg: #ffffff;
  font: inherit;
  color: var(--qd-ink);
  margin: 16px 0;
}

.qd-inner {
  border: 1px solid var(--qd-line);
  border-radius: 10px;
  background: var(--qd-bg);
  overflow: hidden;
}

.qd-head {
  background: var(--qd-accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 14px;
}

.qd-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--qd-line);
}

.qd-row:first-of-type { border-top: 0; }
.qd-ch { color: var(--qd-muted); }
.qd-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* The direct price is the one we want read first, so it gets the only emphasis. */
.qd-direct .qd-ch { color: var(--qd-ink); font-weight: 600; }
.qd-direct .qd-amt { color: var(--qd-accent); font-size: 1.15em; }

/* "from" is the honest hedge on an estimated comparison. It must be legible, not
   hidden — an estimate presented as exact is the failure mode this whole widget
   exists to avoid. */
.qd-approx { color: var(--qd-muted); font-weight: 400; }

.qd-foot {
  padding: 8px 14px 11px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--qd-muted);
  border-top: 1px solid var(--qd-line);
}

/* An unverified figure (the rung-4 floor: we did not check Airbnb for these
   dates) is visually quieter than a checked one. The sentence beneath already
   says so in words; this makes the difference legible before anyone reads it. */
.qd-unverified .qd-head { background: #64748b; }
.qd-unverified .qd-direct .qd-amt { color: var(--qd-ink); }

/* Rung 5: the manager's own line, no numbers. */
.qd-message .qd-head { font-weight: 600; }

/* Cart saver: one pulse on exit intent, then it stops. A widget that keeps
   moving while someone is trying to read their total is a widget that costs the
   booking it was added to save. */
.qd-flash .qd-inner { animation: qd-pulse 900ms ease-out 2; }
@keyframes qd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
  .qd-flash .qd-inner { animation: none; }
}

@media (max-width: 480px) {
  .qd-head { font-size: 14px; }
  .qd-row { padding: 8px 12px; }
}