/* Shared buy-form + bid-queue styling (Part 3d).
   Single source of truth for the ad-campaign order flow, linked by BOTH
   index.html and advertise.html. Light-only by design — do NOT add a
   dark theme here (the portal forces color-scheme:light).

   Depends only on CSS vars defined on BOTH pages (--muted, --ink, --blue);
   for vars present on the homepage but not the portal (--faint, --accent2)
   a literal fallback is supplied so the form renders identically on both. */

/* --- Bid-queue widget --- */
.queue{background:var(--surface-soft,#fbfdfb);border:1px solid var(--line,#e6ece8);border-radius:16px;padding:14px 16px;margin:12px auto 18px;width:100%;max-width:520px}
.queue-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.queue-title{font-size:11px;font-weight:760;letter-spacing:.075em;text-transform:uppercase;color:var(--accent,#188a45)}
.queue-sub{font-size:11px;color:var(--muted)}
.queue-list{list-style:none;margin:0;padding:0}
.queue-list li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:6px 0;font-size:13px;align-items:baseline}
.queue-bid{font-weight:760;font-variant-numeric:tabular-nums;color:var(--ink);min-width:108px}
.queue-name{color:#34383c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-state{font-size:11px;color:var(--muted)}
.queue-state.queue-serving{color:#1c7a3a;font-weight:600}
.queue-state.queue-queued,.queue-state.queue-filled{color:var(--muted);font-weight:600}
.queue-empty{font-size:13px;color:var(--muted);text-align:center;padding:6px 0}

/* --- Buy form — one centered column; fields left-justified inside it --- */
#partnerForm{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin:8px auto 0}
#partnerForm[hidden]{display:none}
#partnerForm .fi{display:flex;flex-direction:column;gap:4px;position:relative;width:100%}
#partnerForm .fi label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
#partnerForm .fi label .opt{font-weight:400;text-transform:none;letter-spacing:0;font-size:11px;color:var(--faint,#a3a8ae)}
#partnerForm .fi input[type=text],#partnerForm .fi input[type=url],#partnerForm .fi input[type=email],#partnerForm .fi input[type=number]{padding:10px 12px;font:inherit;font-size:14px;border:1px solid var(--line-strong,#d8dee8);border-radius:10px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
#partnerForm .fi input:focus{border-color:var(--accent,#188a45);box-shadow:0 0 0 3px rgba(24,138,69,.13)}
#partnerForm .fi input[readonly]{background:#f3f5f8;color:var(--muted);cursor:not-allowed}
#partnerForm .fi.cb{flex-direction:row;align-items:center;gap:8px;align-self:flex-start}
#partnerForm .fi.cb input[type=checkbox]{width:auto;flex:none;margin:0}
#partnerForm .fi.cb label{text-transform:none;font-weight:400;font-size:13px;color:var(--ink);letter-spacing:0}
#partnerForm .fi .charc{position:absolute;right:10px;top:0;font-size:10px;color:var(--faint,#a3a8ae)}
#partnerForm .bidh{font-size:11px;color:var(--muted);margin-top:2px}
#partnerForm .price-row{display:flex;gap:12px;align-items:flex-end;width:100%}
#partnerForm .price-row .fi{flex:1;min-width:0}

/* --- Shared sub-card: the delivery-speed, calculated-price, and live-preview
   sections each sit in their own light card, so the order flow reads as a
   stack of cards continuous with the page's card language (white surface,
   hairline border, soft elevation, matched radius). --- */
.bf-card{
  background:var(--surface,#fff);
  border:1px solid var(--line,#e6ece8);
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 2px rgba(21,31,24,.04),0 6px 18px rgba(21,31,24,.05);
}
#partnerForm .price-total{position:relative}
#partnerForm .price-explain{margin-bottom:12px;font-size:11px;line-height:1.45;color:var(--muted)}
#partnerForm .price-explain b{color:var(--ink);font-weight:700}
#partnerForm .price-main{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
#partnerForm .price-kicker{display:block;font-size:10px;font-weight:760;letter-spacing:.075em;text-transform:uppercase;color:#536477;margin-bottom:2px}
#partnerForm .price-copy{font-size:11px;color:var(--muted)}
#partnerForm .price-value{font-size:28px;line-height:1;font-weight:780;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
#partnerForm .price-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#partnerForm .price-metric{
  min-width:0;
  border:1px solid var(--line,#e6ece8);
  border-radius:12px;
  background:var(--surface-soft,#fbfdfb);
  padding:8px 9px;
}
#partnerForm .price-metric b{display:block;font-size:13px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#partnerForm .price-metric span{display:block;margin-top:1px;font-size:10px;color:var(--muted)}
#partnerForm .price-hint{
  margin-top:9px;
  padding:8px 10px;
  border-radius:12px;
  background:var(--accent-soft,#eaf7ef);
  color:#2f6a45;
  font-size:11px;
  line-height:1.35;
}
#partnerForm .price-hint:empty{display:none}
/* --- Coupon-code row. Selector names stay NEUTRAL on purpose — ad-blocker
   cosmetic filters hide ids/classes named "promo"/"coupon"/"offer" (same
   class of breakage as the old section#advertise); the visible label text
   is not filterable, so only the markup names must stay boring. --- */
/* Self-contained error styling (no dependency on a page-level .micro rule). */
#partnerForm #partnerMsg{color:#b03030;text-align:center;margin-top:0;font-size:12px;line-height:1.4}

/* --- Buttons (scoped to the form + reveal so the page-level .btn rules,
   which other buttons on the homepage also use, are not overridden). --- */
#partnerStart,#partnerForm button.btn{display:flex;align-items:center;justify-content:center;align-self:center;margin-left:auto;margin-right:auto;gap:8px;width:fit-content;min-height:48px;font:inherit;font-size:15px;font-weight:700;padding:13px 26px;border:0;border-radius:999px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background .15s ease}
#partnerForm .stripe-mark{height:17px;width:auto;display:block;margin-top:1px}
/* Extra breathing room so the Checkout CTA sits clearly apart from the live
   preview terminal above it (on top of the form's 12px row gap). */
#partnerForm #partnerSubmit{margin-top:12px}
#partnerStart:hover,#partnerForm button.btn:hover{transform:translateY(-1px)}
#partnerStart.brand,#partnerForm button.btn.brand{background:linear-gradient(180deg,#2387ff,var(--blue));color:#fff;box-shadow:0 13px 24px rgba(20,116,232,.18)}
#partnerStart.brand:hover,#partnerForm button.btn.brand:hover{background:linear-gradient(180deg,#2d8cff,#126ddb)}

@media(max-width:480px){
  #partnerForm .price-row{flex-direction:column;align-items:stretch;gap:10px}
  #partnerForm .price-main{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:10px}
  #partnerForm .price-value{font-size:25px}
  #partnerForm .price-metrics{grid-template-columns:1fr}
}

/* --- Live ad preview — the dark Kickbacks terminal spinner the viewer
   actually sees, precomputed from the fields above. This is the ONE dark
   widget allowed on the otherwise light form: it mimics the in-editor
   spinner (black pane, money-green text), so it must read as a terminal, not
   the page. Mirrors the homepage `.tp.kick-pane` look, self-contained. --- */
.adpv{width:100%;max-width:520px;margin:2px auto 0}
.adpv-cap{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.adpv-term{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  padding:16px 18px;border-radius:12px;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  background:linear-gradient(180deg,var(--term-2,#202329),var(--term,#15171b));
  border:1px solid rgba(56,196,107,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.adpv-line{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-width:0}
.adpv-verb{
  display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;
  font-size:15px;letter-spacing:-.015em;white-space:nowrap;
  color:#86efac;filter:drop-shadow(0 0 8px rgba(56,196,107,.30));
}
.adpv-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adpv-fav{width:20px;height:20px;border-radius:6px;flex:0 0 20px;object-fit:cover;background:#0c1f17;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.adpv-ell{display:inline-block;flex:0 0 3ch;min-width:3ch;text-align:left;color:inherit}

/* Delivery-speed slider — Option 5 "gradient speed track" (amber → green) */
.pace-fi{margin-top:4px}
.pace-fi .pace-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:10px; border-radius:10px; margin:8px 0 0;
  background:linear-gradient(90deg,#f59e0b,#eab308,#16a34a);
  outline:none; cursor:pointer;
}
.pace-fi .pace-range:focus-visible{box-shadow:0 0 0 3px rgba(22,163,74,.30)}
.pace-fi .pace-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:2px solid #fff;
  box-shadow:0 0 0 3px #16a34a, 0 3px 8px rgba(0,0,0,.25);
  cursor:pointer;
}
.pace-fi .pace-range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; border:2px solid #fff;
  background:#fff; box-shadow:0 0 0 3px #16a34a, 0 3px 8px rgba(0,0,0,.25);
  cursor:pointer;
}
.pace-fi .pace-range::-moz-range-track{
  height:10px; border-radius:10px;
  background:linear-gradient(90deg,#f59e0b,#eab308,#16a34a);
}
.pace-fi .pace-ticks{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--muted); margin-top:8px;
}
.pace-fi .pace-ticks .t-c{text-align:center}
.pace-fi .pace-ticks .t-r{text-align:right}
.pace-fi .pace-label{
  font-weight:600; color:#16a34a; text-align:center;
  font-size:13px; margin-top:8px;
}

/* ---- Surface Area Split (task 0181): one-surface campaign toggle ------- */
.surf-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.surf-opt{display:block;cursor:pointer}
.surf-opt input{position:absolute;opacity:0;pointer-events:none}
.surf-opt-body{display:block;border:1.5px solid #d8dee8;border-radius:12px;padding:10px 12px;background:#fff;transition:border-color .12s ease,box-shadow .12s ease}
.surf-opt-body b{display:block;font-size:13.5px;margin-bottom:2px}
.surf-opt-body small{display:block;font-size:11px;color:#617083;line-height:1.45}
.surf-opt input:checked + .surf-opt-body{border-color:#188a45;box-shadow:0 0 0 3px rgba(24,138,69,.14)}
.surf-opt input:focus-visible + .surf-opt-body{outline:2px solid #188a45;outline-offset:2px}
@media(max-width:560px){.surf-toggle{grid-template-columns:1fr}}