/* ============================================================
   GUARANTEED PROSPERITY — VERSION B
   ------------------------------------------------------------
   THERE IS ALMOST NOTHING IN HERE, AND THAT IS THE POINT.

   Version B is version A's page with THREE MORE FIELDS in the same
   registration form. Same two pages, same one form, same one submit,
   same button, same everything. So the only styling version B needs
   is a dropdown that matches the inputs beside it, plus the preview
   markup that stands in for the GoHighLevel form until it is built.

   Loaded ONLY by b.html. It adds; it never overrides v4.css, so
   version A cannot be changed by editing this file.
   ============================================================ */

/* ============================================================
   THE DROPDOWN — the one control version A does not already have.
   A <select> on purpose, not a row of buttons: the brief is
   "everything looks the same, just that small change", and a
   dropdown reads as one more field instead of a new component.
   It is also one row tall, which keeps the card close to A's height.
   ============================================================ */
.field select{
  width:100%;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:15px 44px 15px 16px;
  color:var(--ink);font-family:"Figtree",sans-serif;font-size:16px;
  outline:none;cursor:pointer;
  box-shadow:inset 0 1px 4px rgba(23,18,25,.05);
  transition:border-color .18s, box-shadow .18s;
  /* the native arrow is drawn differently on every OS — replace it with
     one inline chevron so the field matches the inputs on all of them */
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C6373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 17px center;
  background-size:12px 8px;
}
.field select:focus{border-color:var(--love);box-shadow:0 0 0 3px rgba(224,42,102,.2)}
/* the placeholder option must not read as a real answer */
.field select:has(option[value=""]:checked){color:var(--muted)}

/* inside the seat card the fields are bright against the glass — the
   dropdown has to match its neighbours exactly or it looks bolted on */
.regcard .field select{
  background-color:#FFFDFE;border-color:rgba(255,124,176,.5);color:#171219;
  box-shadow:0 0 0 1px rgba(255,156,196,.16), 0 6px 18px rgba(0,0,0,.34);
  padding-top:13px;padding-bottom:13px;
}
.regcard .field select:focus{border-color:var(--love-2);
  box-shadow:0 0 0 4px rgba(255,124,176,.32), 0 6px 18px rgba(0,0,0,.34)}
.regcard .field select:has(option[value=""]:checked){color:#6C6373}

/* THE LONGER CARD — six fields where version A has three. The stack has
   to tighten or the button falls below the fold on a laptop, and this
   card's whole job is being the first thing you see. Values mirror
   v4.css's own short-laptop rules so both versions feel the same. */
@media(min-width:1021px) and (max-height:1000px){
  .regcard .prevform,
  .regcard .ghlform{margin-top:11px}
  .regcard .prevform{gap:9px}
  .regcard .tick-line{margin-top:8px}
  .regcard .field{gap:5px}
  .regcard .field label{font-size:9.8px;letter-spacing:.18em}
  .regcard .field input,
  .regcard .field select{padding-top:10px;padding-bottom:10px;font-size:15px}
  .regcard .pill.big{padding:13px 30px}
}
@media(min-width:1021px) and (max-height:820px){
  .regcard .prevform{gap:8px}
  .regcard .field{gap:4px}
  .regcard .field input,
  .regcard .field select{padding-top:9px;padding-bottom:9px}
  .regcard .fine{margin-top:9px}
}
/* PHONE — six fields will not fit one screen and pretending otherwise
   would just cramp them. Tighten sensibly and let it scroll: on a phone
   a form you scroll through is normal, a form you squint at is not. */
@media(max-width:760px){
  .regcard .prevform{gap:10px}
  .regcard .field{gap:5px}
  .regcard .field input,
  .regcard .field select{padding-top:11px;padding-bottom:11px}
}

/* ============================================================
   PREVIEW MARKUP — the stand-in for a GoHighLevel form that does
   not exist yet. gp.js deletes it the moment a real form id is in,
   so it can never show up alongside the real form.
   ============================================================ */
.prevform{display:grid;gap:12px;margin-top:15px}
.prevform .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){ .prevform .pair{grid-template-columns:1fr} }
.prevform .req{color:var(--love-2)}
.card .prevform .req{color:var(--love-3)}   /* the closing card is dark glass too */

/* THE RIBBON — drawn by gp.js whenever the B page is unwired or the split is
   switched off. It is the visible proof that nothing anyone types here is
   being recorded, and this page gets sent to the client, so it has to be
   readable rather than shouty.

   ⚠️ It is a STATIC BAR AT THE TOP, deliberately. Fixed to the bottom of the
   viewport it landed straight on top of the register button — the one thing
   the page exists for. Do not make it position:fixed again. */
#previewribbon{
  padding:10px 16px;
  text-align:center;
  /* a sentence, so sentence case — the old all-caps label was three words,
     this one is a line of English and caps would make it shouty and hard to
     read at 11px on a phone */
  font-family:"Figtree",sans-serif;
  font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.01em;
  color:#1c1608;
  background:repeating-linear-gradient(135deg,#E8CF9A 0 14px,#C9A45C 14px 28px);
  box-shadow:inset 0 -1px 0 rgba(23,18,25,.18);
}
/* The bar is ~38px of height the real page will not have, and it pushed the
   register button past the fold on the very link we send the client. Give
   that height back out of the hero's own breathing room, so a preview shows
   the same first screen the live page will. Preview only — the moment the
   form id is in, the bar and this rule both stop existing.

   ⚠️ A FLAT value, not a clamp. The first attempt used clamp(8px,1.2vw,16px),
   which on a 1440x768 laptop resolved to 16px — LARGER than the 13.8px v4.css's
   own short-laptop rule already sets, so it made the exact case it was meant to
   help slightly worse. Anything layered on top of those rules has to be smaller
   than all of them unconditionally. */
@media(min-width:1021px){
  body.haspreview .stage-copy{padding-top:8px;padding-bottom:8px}
}
/* short screens get a slimmer bar too — every pixel it costs is a pixel the
   register button drops by */
@media(max-height:820px){
  #previewribbon{padding:6px 14px;font-size:12px}
}