/* ==========================================================================
   Lead actions — leasing quotes + quotation (drawer panel and modal)
   Uses the tokens from style.css.
   ========================================================================== */

/* ── Drawer panel ─────────────────────────────────────────────────────────── */
.act-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.act-card--empty { padding: 16px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.act-card--empty p { margin: 0; }

.act-vehicle {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 14px 16px; background: var(--graphite); color: #fff;
  border-bottom: 2px solid var(--champagne);
}
.act-vehicle strong { display: block; font-size: 16px; font-variation-settings: var(--wide); font-weight: 700; }
.act-price { text-align: right; }
.act-price strong { font-variant-numeric: tabular-nums; color: #e6d3ad; }
.act-vehicle .act-label { color: #9aa3ad; }
.act-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

.act-block { padding: 14px 16px; }
.act-block + .act-block { border-top: 1px solid var(--border); }
.act-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.act-block__head > span { font-weight: 700; font-size: 13px; font-variation-settings: var(--wide); color: var(--graphite); }
.act-help { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.act-sub { color: var(--muted); font-size: 12px; }
.act-notice { margin-bottom: 10px; font-size: 12.5px; }
.act-demo { margin: 8px 0 0; font-size: 11.5px; color: #8a6d36; background: var(--champagne-50); border-radius: 6px; padding: 6px 9px; }

.act-partners { display: grid; gap: 6px; margin-bottom: 12px; }
.act-partner {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; font-size: 13px; transition: border-color .12s, background .12s;
}
.act-partner:hover { border-color: var(--border-strong); }
.act-partner.is-on { border-color: var(--champagne); background: var(--champagne-50); }
.act-partner input { accent-color: var(--graphite); width: 16px; height: 16px; margin: 0; }
.act-partner b { display: block; font-weight: 600; }
.act-partner small { color: var(--muted); font-size: 11.5px; }

.act-terms { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: end; margin-bottom: 12px; }
.act-terms label { font-size: 12px; font-weight: 600; color: var(--text-2); display: grid; gap: 4px; }
.act-terms .select { width: auto; padding: 6px 28px 6px 10px; }
.act-estimate { text-align: right; font-variant-numeric: tabular-nums; }
.act-estimate b { display: block; font-size: 14px; }

.act-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.act-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 8px 6px; }
.act-table td { padding: 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.act-table td small { display: block; color: var(--muted); font-size: 11px; }
.act-table .num, .qdoc .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-table tr.is-best td { background: #e8f5ee; font-weight: 700; }
.act-table tr.is-best td:first-child { box-shadow: inset 3px 0 0 var(--hot); }
.act-table tr.is-declined td { color: var(--muted); text-decoration: line-through; }
.act-table tr.is-pending .link-btn { margin-left: 8px; font-size: 12px; }
.act-wait { color: var(--warm); font-size: 12px; font-weight: 600; }
.act-wait::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: act-pulse 1.2s ease-in-out infinite; }
@keyframes act-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .act-wait::before { animation: none; } }
.act-tag { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--hot); color: #fff; border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.act-enter { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.act-enter .input { width: 96px; padding: 5px 8px; }
.act-summary { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.act-summary b { font-variant-numeric: tabular-nums; }

.act-quotes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.act-quotes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.act-quotes small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.act-quotes__right { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.act-status { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.act-status--sent { background: var(--converted-bg); color: var(--converted-fg); }
.act-status--draft { background: var(--champagne-50); color: #8a6d36; border: 1px solid #e6d3ad; }
.act-cta { width: 100%; justify-content: center; }

/* ── Quotation modal ──────────────────────────────────────────────────────── */
.modal--quote { max-width: 1040px; }
.quote-grid { display: grid; grid-template-columns: 340px 1fr; max-height: 72vh; }
.quote-form { padding: 20px 22px; overflow-y: auto; border-right: 1px solid var(--border); display: grid; gap: 14px; align-content: start; }
.quote-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-form legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; padding: 0; }
.quote-form .field { margin: 0; }
.quote-variants { display: grid; gap: 6px; }
.quote-form .quote-opt { display: flex; margin: 0; font-weight: 400; color: var(--text); align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px; }
.quote-opt.is-on { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.quote-opt input { accent-color: var(--graphite); margin: 0; }
.quote-opt small { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
.quote-addons { display: grid; gap: 4px; }
.quote-form .quote-check { display: grid; margin: 0; font-weight: 400; color: var(--text); grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; cursor: pointer; border-bottom: 1px dashed var(--border); }
.quote-check input { accent-color: var(--graphite); margin: 0; }
.quote-check small { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.quote-preview { padding: 22px; background: #e4e7eb; overflow-y: auto; }
.qdoc { background: #fff; border-radius: 6px; padding: 26px 28px; box-shadow: 0 8px 26px rgba(20, 25, 30, .14); font-size: 13px; }
.qdoc__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--graphite); }
.qdoc__head b { display: block; font-size: 15px; }
.qdoc__head small { color: var(--muted); }
.qdoc__title { text-align: right; }
.qdoc__title strong { display: block; font-size: 22px; font-variation-settings: var(--wide); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.qdoc__label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.qdoc__head .qdoc__label { margin-top: 0; }
.qdoc__vehicle { margin: 16px 0 8px; padding: 10px 14px; background: #f4f5f7; border-left: 4px solid var(--champagne); }
.qdoc__vehicle b { font-size: 17px; font-variation-settings: "wdth" 112; }
.qdoc__vehicle span { color: var(--muted); margin-left: 6px; }
.qdoc table { width: 100%; border-collapse: collapse; }
.qdoc td, .qdoc th { padding: 7px 0; border-bottom: 1px solid #e6e9ec; text-align: left; }
.qdoc__lease td, .qdoc__lease th { padding: 7px 6px; }
.qdoc th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qdoc small { color: var(--muted); }
.qdoc tr.is-discount td { color: var(--converted-fg); }
.qdoc tr.is-total td { border-top: 2px solid var(--graphite); border-bottom: 0; font-weight: 800; font-size: 16px; padding-top: 10px; }
.qdoc__lease tr.is-best td { background: #e8f5ee; }
.qdoc__foot { margin: 14px 0 0; font-size: 11.5px; color: #8a6d36; }

.quote-sent { padding: 36px 32px 30px; text-align: center; }
.quote-sent__mark { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center;
  background: var(--converted-bg); color: var(--converted-fg); font-size: 24px; font-weight: 800; }
.quote-sent h3 { margin: 0 0 6px; font-size: 19px; font-variation-settings: var(--wide); }
.quote-sent p { margin: 0 auto 22px; max-width: 520px; color: var(--text-2); }
.quote-sent__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn--wa { background: #1f8f5f; color: #fff; text-decoration: none; }
.btn--wa:hover { background: #18774e; }
.quote-sent .btn { text-decoration: none; }

@media (max-width: 860px) {
  .quote-grid { grid-template-columns: 1fr; max-height: none; }
  .quote-form { border-right: 0; border-bottom: 1px solid var(--border); }
  .act-terms { grid-template-columns: 1fr 1fr; }
  .act-estimate { grid-column: 1 / -1; text-align: left; }
}

/* Wider lead panel so the LinkedIn analysis and leasing tables have room */
.drawer { width: min(640px, 100vw); }