/* 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,#fdfaf8);border:1px solid #e5d4cb;border-radius:16px;padding:14px 16px;margin:12px auto 18px;width:100%;max-width:520px;box-shadow:0 1px 3px rgba(36,20,15,.06),0 8px 22px rgba(36,20,15,.06)}
.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,#e8491f)}
.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:#c23a12;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:700;color:#435166;text-transform:uppercase;letter-spacing:.045em}
#partnerForm .fi label .opt{font-weight:520;text-transform:none;letter-spacing:0;font-size:11px;color:#69778a}
#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 #c3ced8;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,#e8491f);box-shadow:0 0 0 3px rgba(232,73,31,.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,#b0a49e)}
#partnerForm .fi .fi-hint{display:block;padding-right:54px;color:#667589;font-size:11px;line-height:1.45}
#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}
#iconDrop{width:100%;border:2px dashed #d8dee8;border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;font:inherit;font-size:12px;color:var(--muted);background:var(--surface,#fff)}
#iconDrop:hover{border-color:#aebdca;background:var(--surface-soft,#fdfaf8)}
#iconDrop:focus-visible{outline:3px solid rgba(232,73,31,.3);outline-offset:2px;border-color:var(--accent,#e8491f)}

/* --- 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 #e5d4cb;
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 3px rgba(36,20,15,.07),0 8px 24px rgba(36,20,15,.07);
}
#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,#f0e4dd);
  border-radius:12px;
  background:var(--surface-soft,#fdfaf8);
  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,#fceae3);
  color:#a03a1a;
  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}
#partnerForm button.btn:disabled{cursor:wait;opacity:.72;transform:none;box-shadow:none}
#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 AddAds 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,#261a16),var(--term,#1a0e0c));
  border:1px solid rgba(236,103,59,.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:#f8bfa4;filter:drop-shadow(0 0 8px rgba(236,103,59,.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:#291410;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,#e8491f);
  outline:none; cursor:pointer;
}
.pace-fi .pace-range:focus-visible{box-shadow:0 0 0 3px rgba(232,73,31,.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 #e8491f, 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 #e8491f, 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,#e8491f);
}
.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:#e8491f; 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:#e8491f;box-shadow:0 0 0 3px rgba(232,73,31,.14)}
.surf-opt input:focus-visible + .surf-opt-body{outline:2px solid #e8491f;outline-offset:2px}
@media(max-width:560px){.surf-toggle{grid-template-columns:1fr}}

/* Country targeting — neutral selector names avoid cosmetic ad-block rules. */
.geo-fi{overflow:hidden}
.geo-flag{position:absolute;top:17px;right:-37px;transform:rotate(45deg);z-index:1;background:linear-gradient(180deg,#2387ff,#176fe3);color:#fff;font-size:10px;font-weight:800;letter-spacing:.16em;padding:5px 44px;box-shadow:0 6px 14px rgba(23,111,227,.28);pointer-events:none}
.geo-mode{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.geo-mode label{display:flex;align-items:center;gap:6px;border:1px solid #d8dee8;border-radius:999px;padding:7px 11px;background:#fff;cursor:pointer;font-size:13px}
.geo-mode label:has(input:checked){border-color:#e8491f;background:#fdf1ec;color:#6e1d06;font-weight:700}
.geo-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.geo-chip{border:1px solid #e9ae8f;border-radius:999px;background:#fdf1ec;color:#6e1d06;padding:5px 9px;font:inherit;font-size:12px;cursor:pointer}
.geo-search{width:100%}
.geo-results{display:grid;gap:3px;max-height:180px;overflow:auto;margin-top:4px;padding:5px;border:1px solid #d8dee8;border-radius:10px;background:#fff}
.geo-result{width:100%;border:0;background:#fff;text-align:left;padding:7px 9px;border-radius:7px;font:inherit;font-size:13px;cursor:pointer}
.geo-result:hover,.geo-result:focus-visible{background:#fdf1ec;outline:1px solid #e9ae8f}
.geo-hint,.geo-forecast,.geo-lane{font-size:11px;line-height:1.45;color:var(--muted);margin-top:7px}
.geo-forecast{padding:8px 10px;border-radius:10px;background:#fdf1ec;color:#a03a1a}