/* advertise.css - styles for the self-service /advertise page. Layers on top of
 * seo.css (shares the dark racing palette + header/footer). Only the buy form,
 * inventory card and state banners are defined here. */

/* ---- inventory summary card ---- */
.inv-card {
  display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-around;
  text-align: center;
}
.inv-stat { min-width: 120px; }
.inv-num { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.inv-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* ---- state banners ---- */
.banner {
  border-radius: 12px; padding: 14px 18px; margin: 18px 0; font-size: 15px;
  border: 1px solid var(--line); background: var(--panel);
}
.banner.ok    { border-color: #2e7d46; background: rgba(46,125,70,.15); color: #b7f0c4; }
.banner.warn  { border-color: #a86b1f; background: rgba(168,107,31,.15); color: #ffd9a8; }
.banner.error { border-color: #a33; background: rgba(163,51,51,.15); color: #ffbdbd; }

/* ---- form ---- */
.ad-form { margin-top: 22px; }
.field { margin: 0 0 20px; }
.field > label { display: block; font-weight: 700; color: #fff; margin-bottom: 7px; }
.field .opt { color: var(--muted); font-weight: 400; font-size: 13px; }
.hint { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.45; }

input[type=text], input[type=email], input[type=url], select {
  width: 100%; background: #0f141c; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 16px; font-family: inherit;
}
input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, select:focus {
  outline: none; border-color: var(--blue);
}

/* upload */
.upload-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.file-btn {
  display: inline-block; cursor: pointer;
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: 11px 18px; font-weight: 700; font-size: 15px;
}
.file-btn:hover { background: rgba(255,202,40,.08); }
.thumb { min-height: 0; }
.thumb img {
  max-height: 90px; border-radius: 8px; border: 1px solid var(--line);
  background: #0a0d12; display: block;
}

/* count slider */
.count-row { display: flex; align-items: center; gap: 16px; }
.count-row input[type=range] { flex: 1; accent-color: var(--accent); height: 6px; }
.count-out {
  min-width: 54px; text-align: center; font-size: 22px; font-weight: 800; color: var(--accent);
  background: #0f141c; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px;
}

/* zones */
.zone-box { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.zone-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: #0f141c; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 14px; color: var(--text); user-select: none;
}
.zone-chip input { accent-color: var(--accent); }
.zone-chip.on { border-color: var(--accent); color: #fff; }
.zone-chip .z-count { color: var(--muted); font-size: 12px; }
/* premium start/finish-line chip - visually set apart from the standard zones */
.zone-chip.premium { border-color: #6a5518; background: rgba(255,213,74,.07); color: #ffe6a3; font-weight: 700; }
.zone-chip.premium .z-count { color: var(--accent); font-weight: 700; }
.zone-chip.premium.on { border-color: #ffd54a; color: #fff; box-shadow: 0 0 0 1px rgba(255,213,74,.35) inset; }
.zone-chip.disabled { opacity: .5; cursor: not-allowed; }

/* price */
.price-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 26px 0 18px; padding: 16px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.price-tag { font-size: 34px; font-weight: 800; color: #fff; }
.price-tag .per { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.price-sub { color: var(--muted); font-size: 14px; }

.buy-btn { border: 0; cursor: pointer; font-family: inherit; }
.buy-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.form-msg { margin: 12px 0 0; font-size: 15px; }
.form-msg.error { color: #ffbdbd; }
.form-msg.ok { color: #b7f0c4; }
.fine { color: var(--muted); font-size: 13px; margin-top: 16px; line-height: 1.5; }