/* =============================================================================
   Book a Pro — Uber-style bidding widget
   Self-contained styling scoped under .bp-* classes.
   ============================================================================= */
:root {
  --bp-ink: #0b0b0f;
  --bp-ink-2: #16161d;
  --bp-paper: #ffffff;
  --bp-mut: #6b7280;
  --bp-mut-2: #9aa2af;
  --bp-line: #ececf0;
  --bp-line-2: #23232c;
  --bp-brand: #0b0b0f;
  --bp-accent: #00c2a8;     /* coastal teal accent */
  --bp-accent-ink: #063d36;
  --bp-blue: #276ef1;       /* uber-ish blue */
  --bp-warn: #b8860b;
  --bp-good: #0a8f5b;
  --bp-radius: 16px;
  --bp-shadow: 0 12px 40px rgba(9, 12, 20, .14);
  --bp-shadow-sm: 0 4px 16px rgba(9, 12, 20, .08);
}

* { box-sizing: border-box; }

body.bp-body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--bp-ink);
  background: #f4f5f7;
  -webkit-font-smoothing: antialiased;
}

/* ---- top bar ---- */
.bp-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--bp-ink); color: #fff;
}
.bp-top-wrap {
  max-width: 1100px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bp-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.bp-brand .logo { font-size: 22px; }
.bp-top a { color: #d7d9e0; text-decoration: none; font-weight: 600; font-size: 14px; }
.bp-top a:hover { color: #fff; }
.bp-top-links { display: flex; align-items: center; gap: 22px; }

/* ---- stage ---- */
.bp-stage {
  max-width: 1100px; margin: 0 auto; padding: 28px 20px 80px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: start;
}
@media (max-width: 900px) { .bp-stage { grid-template-columns: 1fr; } }

/* left: context / map-ish panel */
.bp-context {
  position: sticky; top: 84px;
  border-radius: 22px; overflow: hidden; min-height: 520px;
  background:
    radial-gradient(120% 80% at 20% 0%, #1b2733 0%, #0b0b0f 60%),
    var(--bp-ink);
  color: #fff; box-shadow: var(--bp-shadow);
}
@media (max-width: 900px) { .bp-context { position: static; min-height: 200px; } }
.bp-context-inner { padding: 26px; height: 100%; display: flex; flex-direction: column; }
.bp-context .eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; color: var(--bp-accent);
}
.bp-context h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.05; margin: 10px 0 8px; letter-spacing: -.03em; }
.bp-context p { color: #b8bdc9; margin: 0; font-size: 15px; max-width: 42ch; }
.bp-map {
  margin-top: auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--bp-line-2);
  position: relative; height: 220px; background: #0f141b;
}
.bp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-pin { animation: bp-pulse 2.2s ease-in-out infinite; transform-origin: center; }
@keyframes bp-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.bp-context .trust { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.bp-context .trust b { display: block; font-size: 20px; }
.bp-context .trust span { color: var(--bp-mut-2); font-size: 12px; }

/* right: the actual widget (bottom-sheet feel) */
.bp-sheet {
  background: var(--bp-paper); border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow); overflow: hidden; border: 1px solid var(--bp-line);
}
.bp-progress { height: 4px; background: var(--bp-line); }
.bp-progress > i { display: block; height: 100%; background: var(--bp-ink); transition: width .35s ease; }
.bp-sheet-inner { padding: 22px 22px 24px; }
.bp-step-ey { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-mut); }
.bp-h { font-size: 22px; letter-spacing: -.02em; margin: 6px 0 2px; font-weight: 800; }
.bp-sub { color: var(--bp-mut); font-size: 14px; margin: 0 0 18px; }

/* choice grid */
.bp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bp-grid.cols-1 { grid-template-columns: 1fr; }
.bp-choice {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  border: 1.5px solid var(--bp-line); background: #fff; border-radius: 14px;
  padding: 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .05s;
  font: inherit; color: inherit;
}
.bp-choice:hover { border-color: #c7cbd4; }
.bp-choice:active { transform: scale(.99); }
.bp-choice.sel { border-color: var(--bp-ink); background: #f7f8fa; box-shadow: inset 0 0 0 1px var(--bp-ink); }
.bp-choice .ic { font-size: 24px; width: 34px; text-align: center; }
.bp-choice .tx { display: flex; flex-direction: column; gap: 2px; }
.bp-choice .tx b { font-size: 15px; }
.bp-choice .tx small { color: var(--bp-mut); font-size: 12.5px; }
.bp-choice .rt { margin-left: auto; color: var(--bp-mut); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* fields */
.bp-field { margin-top: 14px; }
.bp-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; display: block; }
.bp-input, .bp-textarea {
  width: 100%; border: 1.5px solid var(--bp-line); border-radius: 12px; padding: 12px 14px;
  font: inherit; color: inherit; background: #fff; resize: vertical;
}
.bp-input:focus, .bp-textarea:focus { outline: none; border-color: var(--bp-ink); }
.bp-textarea { min-height: 92px; }

/* photo dropzone */
.bp-drop {
  margin-top: 6px; border: 2px dashed var(--bp-line); border-radius: 14px; padding: 22px;
  text-align: center; cursor: pointer; color: var(--bp-mut); transition: border-color .15s, background .15s;
}
.bp-drop:hover { border-color: var(--bp-ink); background: #fafbfc; }
.bp-drop b { color: var(--bp-ink); }
.bp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.bp-thumb {
  width: 74px; height: 74px; border-radius: 10px; object-fit: cover; border: 1px solid var(--bp-line);
  position: relative;
}
.bp-thumb-wrap { position: relative; }
.bp-thumb-x {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bp-ink); color: #fff; border: 2px solid #fff; cursor: pointer; font-size: 12px;
  display: grid; place-items: center; line-height: 1;
}

/* estimate reveal */
.bp-est { text-align: center; padding: 8px 0 4px; }
.bp-est .range { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.bp-est .range small { font-size: 18px; color: var(--bp-mut); font-weight: 700; }
.bp-est .mid { color: var(--bp-mut); font-size: 14px; margin-top: 2px; }
.bp-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 800; margin-top: 14px;
}
.bp-badge.guar { background: #e6f7ef; color: var(--bp-good); }
.bp-badge.pend { background: #fdf3e0; color: var(--bp-warn); }
.bp-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.bp-layers { margin-top: 18px; display: grid; gap: 10px; }
.bp-layer {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: #f7f8fa; border: 1px solid var(--bp-line); text-align: left;
}
.bp-layer .lc { font-size: 18px; }
.bp-layer b { font-size: 13.5px; }
.bp-layer p { margin: 3px 0 0; font-size: 13px; color: var(--bp-mut); }
.bp-layer .amt { margin-left: auto; font-weight: 800; white-space: nowrap; }

/* set-your-price */
.bp-fare { text-align: center; margin: 6px 0 4px; }
.bp-fare .you {
  font-size: 46px; font-weight: 800; letter-spacing: -.03em;
}
.bp-fare .you .cur { font-size: 26px; vertical-align: super; color: var(--bp-mut); margin-right: 2px; }
.bp-odds { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.bp-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: var(--bp-line); margin: 20px 0 6px; outline: none;
}
.bp-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bp-ink); cursor: pointer; border: 4px solid #fff; box-shadow: var(--bp-shadow-sm);
}
.bp-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bp-ink); cursor: pointer;
  border: 4px solid #fff; box-shadow: var(--bp-shadow-sm);
}
.bp-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--bp-mut); }
.bp-meter { height: 8px; border-radius: 999px; background: var(--bp-line); overflow: hidden; margin-top: 14px; }
.bp-meter > i { display: block; height: 100%; transition: width .25s ease, background .25s ease; }

/* matching / live pros */
.bp-live-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bp-spin {
  width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bp-line);
  border-top-color: var(--bp-ink); animation: bp-rot .8s linear infinite;
}
@keyframes bp-rot { to { transform: rotate(360deg); } }
.bp-pro {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--bp-line);
  border-radius: 14px; margin-top: 10px; background: #fff; opacity: 0; transform: translateY(8px);
  animation: bp-in .35s ease forwards;
}
@keyframes bp-in { to { opacity: 1; transform: none; } }
.bp-pro .av {
  width: 42px; height: 42px; border-radius: 50%; background: var(--bp-ink); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none;
}
.bp-pro .meta { min-width: 0; }
.bp-pro .meta b { font-size: 15px; display: block; }
.bp-pro .meta small { color: var(--bp-mut); font-size: 12.5px; }
.bp-pro .status { margin-left: auto; font-weight: 800; font-size: 13px; white-space: nowrap; }
.bp-pro .status.ping { color: var(--bp-mut); }
.bp-pro .status.pass { color: #c0392b; }
.bp-pro .status.acc  { color: var(--bp-good); }
.bp-pro.win { border-color: var(--bp-good); box-shadow: 0 0 0 1px var(--bp-good); background: #f4fbf7; }

/* waiver */
.bp-waiver { border: 1px solid var(--bp-line); border-radius: 14px; padding: 16px; background: #fafbfc; }
.bp-waiver h4 { margin: 0 0 8px; font-size: 15px; }
.bp-waiver ul { margin: 0; padding-left: 18px; }
.bp-waiver li { font-size: 13px; color: #33363d; margin: 7px 0; line-height: 1.45; }
.bp-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; }
.bp-check input { margin-top: 3px; width: 18px; height: 18px; }

/* confirmation */
.bp-done { text-align: center; padding: 10px 0; }
.bp-done .tick {
  width: 66px; height: 66px; border-radius: 50%; background: var(--bp-good); color: #fff;
  display: grid; place-items: center; font-size: 34px; margin: 0 auto 12px;
  animation: bp-pop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes bp-pop { from { transform: scale(0); } }
.bp-receipt { text-align: left; border: 1px solid var(--bp-line); border-radius: 14px; margin-top: 16px; overflow: hidden; }
.bp-receipt .row { display: flex; justify-content: space-between; padding: 12px 15px; font-size: 14px; }
.bp-receipt .row + .row { border-top: 1px solid var(--bp-line); }
.bp-receipt .row .k { color: var(--bp-mut); }
.bp-receipt .row .v { font-weight: 700; text-align: right; }
.bp-receipt .row.total { background: #f7f8fa; }
.bp-receipt .row.total .v { font-size: 17px; }

/* buttons + footer bar */
.bp-actions { display: flex; gap: 10px; margin-top: 22px; }
.bp-btn {
  appearance: none; border: none; font: inherit; font-weight: 800; cursor: pointer;
  border-radius: 12px; padding: 15px 18px; transition: transform .05s, opacity .15s, background .15s;
}
.bp-btn:active { transform: scale(.99); }
.bp-btn[disabled] { opacity: .4; cursor: not-allowed; }
.bp-btn-primary { background: var(--bp-ink); color: #fff; flex: 1; }
.bp-btn-primary:hover:not([disabled]) { background: #22232d; }
.bp-btn-ghost { background: #fff; color: var(--bp-ink); border: 1.5px solid var(--bp-line); }
.bp-btn-ghost:hover { border-color: #c7cbd4; }
.bp-btn-good { background: var(--bp-good); color: #fff; flex: 1; }
.bp-note { font-size: 12px; color: var(--bp-mut); text-align: center; margin-top: 12px; }

.bp-fadein { animation: bp-fade .3s ease; }
@keyframes bp-fade { from { opacity: 0; transform: translateY(6px); } }

.bp-foot { text-align: center; color: var(--bp-mut); font-size: 12.5px; padding: 24px; }
.bp-foot a { color: var(--bp-mut); }