/* ============================================================
   FinishBay CONTACT-form embed → APEX theme (scoped to #fb-contact)
   Mirrors book.css Part 1 (the booking embed). Vendor surface:
   root .fb-cf + .fb-cf__* classes + --fb-* CSS variables.
   --fb-accent is set INLINE by the embed → needs !important.
   ============================================================ */

/* Carbon-framed shell around the embed — same card as the booking form */
#fb-contact{
  position:relative;margin-top:1.6rem;background:var(--bg2);border:1px solid var(--line);
  padding:clamp(1.25rem,3.5vw,2.2rem);
  clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px));
}
#fb-contact::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--red)}

/* Map APEX tokens onto the vendor's theming variables */
#fb-contact .fb-cf{
  --fb-accent:var(--red) !important;
  --fb-accent-contrast:#fff;
  --fb-fg:var(--white);
  --fb-muted:var(--steel);
  --fb-field-bg:var(--bg3);
  --fb-border:var(--line2);
  --fb-radius:0px;
  font-family:var(--body);color:var(--white);background:transparent;
}

/* The page already shows the eyebrow + H2 + intro right above the card, and the FinishBay form
   repeats the same title/subtitle — hide the embed's copy so it isn't said twice. */
#fb-contact .fb-cf__head{display:none}

/* Display type on the title + "Message sent" heading */
#fb-contact .fb-cf__title,
#fb-contact .fb-cf__done-title{
  font-family:var(--disp);font-weight:700;font-style:italic;text-transform:uppercase;color:var(--white);letter-spacing:.01em}
#fb-contact .fb-cf__subtitle,
#fb-contact .fb-cf__done-msg{color:var(--silver)}

/* Mono, tracked-out labels (matches the booking form + site labels) */
#fb-contact .fb-cf__label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
#fb-contact .fb-cf__req{color:var(--red)}

/* Fields: dark carbon, white text, red focus edge */
#fb-contact .fb-cf__input,
#fb-contact .fb-cf__select,
#fb-contact .fb-cf__textarea{
  font-family:var(--body);color:var(--white);background:var(--bg3);border-color:var(--line2)}
#fb-contact .fb-cf__input::placeholder,
#fb-contact .fb-cf__textarea::placeholder{color:var(--steel);opacity:1}
#fb-contact .fb-cf__input:focus,
#fb-contact .fb-cf__select:focus,
#fb-contact .fb-cf__textarea:focus{border-color:var(--red)}
#fb-contact .fb-cf__select option{background:var(--bg3);color:var(--white)}
#fb-contact .fb-cf__check{color:var(--silver)}
#fb-contact .fb-cf input[type="checkbox"]{accent-color:var(--red)}

/* Error message */
#fb-contact .fb-cf__error{background:rgba(228,11,28,.12);border:1px solid var(--red);color:var(--red-2)}

/* Submit → angular APEX red button */
#fb-contact .fb-cf__btn{
  font-family:var(--disp);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.04em;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);transition:.2s ease}
#fb-contact .fb-cf__btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px)}

/* Half / third-width fields (set per field in FinishBay, e.g. Name + Email = "half").
   The vendor only puts them side by side when .fb-cf (its container) is >= 480px, but our
   card column renders it ~458px wide, so they stacked. Same rule, lower threshold;
   phones (< 340px form width) still stack. */
@container (min-width:340px){
  #fb-contact .fb-cf__fields > .fb-cf__w-half{flex-basis:calc(50% - var(--fb-gap) / 2)}
  #fb-contact .fb-cf__fields > .fb-cf__w-third{flex-basis:calc(33.333% - var(--fb-gap) * 2 / 3)}
}

/* Small print under the form */
.fb-contact-note{margin-top:1rem;font-size:.82rem;color:var(--steel)}
.fb-contact-note a{color:var(--red)}