/* 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:#f6f9fd;border:1px solid #dde6f1;border-radius:14px;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(--blue)}
.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 #d8dee8;border-radius:8px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s ease}
#partnerForm .fi input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,116,232,.12)}
#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}
#partnerForm .price-total{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(20,116,232,.15);
  border-radius:16px;
  padding:14px;
  background:
    linear-gradient(135deg,rgba(20,116,232,.10),rgba(56,196,107,.06) 58%,rgba(255,255,255,.88)),
    #fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 10px 24px rgba(20,116,232,.07);
}
#partnerForm .price-total:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#2387ff,var(--accent2,#38c46b));
}
#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 rgba(20,30,24,.08);
  border-radius:10px;
  background:rgba(255,255,255,.62);
  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:10px;
  background:rgba(20,116,232,.10);
  color:#285f9f;
  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}
#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}
}