/* ============================================================
   Iron Barbell — the No-Sweat Intro lead form (Module 19)
   ============================================================
   A pop-up on the marketing site: five fields, then live availability off the
   GoHighLevel calendar, then a confirmation. Talks to /api/lead on the app.

   APP SKIN A [27 Aug 2026 — Adam's redesign]. The card went LIGHT: a white
   panel with the electric top rule, the same face the app itself wears — so
   the thing that books you in looks like the thing you'll be using. Same
   markup, same flow, same fail-safes; only the paint changed. Palette is the
   app's: ink #12161A · muted #5B6672 · faint #8794A1 · line #DDE3E9 · sunk
   #F4F6F8 · electric #075DC6.

   Everything is namespaced .ibl-* and nothing here touches a page's own rules.

   Desktop is a centred modal. PHONE IS A BOTTOM SHEET, and that is not a
   styling preference: it keeps the fields above the thumb and stops the primary
   button disappearing behind the keyboard.
   ============================================================ */

/* DISPLAY IS THE SWITCH, AND THE FADE IS DECORATION — never the other way
   round. If visibility depended on a transition running from opacity 0, then
   anywhere the transition does not advance (a backgrounded tab, a throttled
   device, an engine that skipped it) you get a full-screen invisible overlay
   that still swallows every click. An animation that never runs just leaves the
   element at its normal style: open and visible. Fail-safe, not fail-pretty. */
.ibl-scrim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(5, 5, 5, 0.82);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
/* THE SCRIM'S OPACITY IS NEVER ANIMATED. A CSS animation that is paused — a
   backgrounded tab, a throttled device — sits on its FIRST keyframe, so any
   fade-in can leave a full-screen overlay invisible and still swallowing every
   click. `display` is the only switch, and the one animated property is the
   modal's transform, where being stuck 8px low is merely untidy. */
.ibl-scrim.is-open { display: flex; }
.ibl-scrim.is-open .ibl-modal { animation: ibl-rise 160ms ease; }
@keyframes ibl-rise { from { transform: translateY(8px); } to { transform: translateY(0); } }
body.ibl-locked { overflow: hidden; }

.ibl-modal {
  position: relative;
  width: 472px; max-width: 100%;
  background: #FFFFFF;
  border: 1px solid #DDE3E9;
  border-top: 3px solid var(--electric, #075DC6);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  padding: 28px 30px 26px;
  font-family: var(--F-body, "Inter", "Helvetica Neue", Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.ibl-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid #DDE3E9;
  border-radius: 4px;
  color: #8794A1;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 120ms ease, border-color 120ms ease;
}
.ibl-x:hover { color: #12161A; border-color: #8794A1; }

.ibl-grab { display: none; }

/* ---- shared type ------------------------------------------- */
.ibl-eyebrow {
  font-weight: 800; font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--electric, #075DC6); margin: 0 0 12px;
}
.ibl-h {
  font-family: var(--F-cond, "Barlow Condensed", Oswald, Impact, sans-serif);
  font-weight: 900; font-size: 34px; line-height: 0.94; letter-spacing: 0.02em;
  text-transform: uppercase; color: #12161A; text-wrap: pretty;
  margin: 0 0 10px;
}
.ibl-sub { font-size: 13px; line-height: 1.55; color: #5B6672; margin: 0 0 20px; }
.ibl-fine { font-size: 11px; line-height: 1.5; color: #8794A1; text-align: center; margin: 12px 0 0; }

/* ---- state 1 · details -------------------------------------- */
.ibl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 11px; }
.ibl-row-1 { display: block; margin-bottom: 18px; }

.ibl-field label {
  display: block;
  font-weight: 800; font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8794A1; margin: 0 0 6px;
}
.ibl-field input,
.ibl-field textarea {
  width: 100%; box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #DDE3E9;
  border-radius: 4px;
  padding: 11px 12px;
  color: #12161A; font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms ease;
}
.ibl-field textarea { resize: none; line-height: 1.5; }
.ibl-field input:focus,
.ibl-field textarea:focus { border-color: var(--electric, #075DC6); }
.ibl-field input::placeholder,
.ibl-field textarea::placeholder { color: #A6B0BB; }

/* The honeypot. Off-screen rather than display:none — a bot reading the DOM
   fills it either way, and a screen reader is told to skip it. */
.ibl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ibl-btn {
  width: 100%; box-sizing: border-box;
  background: var(--electric, #075DC6);
  border: 1px solid var(--electric, #075DC6);
  border-radius: 4px; padding: 15px;
  color: #FFFFFF; font-family: inherit;
  font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.ibl-btn:hover { background: var(--electric-hover, #1C77E0); }
.ibl-btn:active { background: #044399; }
/* No error state and no red border anywhere: the button simply stays off until
   the form is complete. Nobody is told off for typing slowly. */
.ibl-btn[disabled] {
  background: #EAEEF2;
  border-color: #DDE3E9;
  color: #8794A1;
  cursor: default;
}
/* Busy keeps the blue — a gray flash mid-save reads as "it broke". */
.ibl-btn.is-busy,
.ibl-btn.is-busy[disabled] {
  background: var(--electric, #075DC6);
  border-color: var(--electric, #075DC6);
  color: transparent; position: relative;
}
.ibl-btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF;
  animation: ibl-spin 620ms linear infinite;
}
@keyframes ibl-spin { to { transform: rotate(360deg); } }

.ibl-err {
  font-size: 12px; line-height: 1.5; color: #C4392E;
  margin: 12px 0 0; text-align: center;
}

/* ---- state 2 · pick a time ---------------------------------- */
.ibl-back {
  background: transparent; border: 0; padding: 0;
  font-family: inherit; font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #8794A1; cursor: pointer;
  margin: 0 0 12px;
  transition: color 120ms ease;
}
.ibl-back:hover { color: #12161A; }

.ibl-days { display: grid; gap: 12px; max-height: 296px; overflow-y: auto; margin-bottom: 18px; }
.ibl-day {
  display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center;
  border-top: 1px solid #EAEEF2; padding-top: 11px;
}
.ibl-day-n {
  font-family: var(--F-cond, "Barlow Condensed", Oswald, Impact, sans-serif);
  font-weight: 900; font-size: 19px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #12161A;
}
.ibl-day-d { font-size: 10.5px; color: #8794A1; margin-top: 3px; }
.ibl-times { display: flex; flex-wrap: wrap; gap: 7px; }

.ibl-slot {
  background: #F4F6F8;
  border: 1px solid #DDE3E9;
  border-radius: 4px; padding: 9px 14px;
  color: #5B6672; font-family: inherit;
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.ibl-slot:hover { border-color: var(--electric, #075DC6); color: var(--electric, #075DC6); }
.ibl-slot.is-on {
  background: var(--electric, #075DC6);
  border-color: var(--electric, #075DC6);
  color: #FFFFFF; font-weight: 800;
}
.ibl-more {
  background: transparent; border: 1px dashed #C3CCD6;
  border-radius: 4px; padding: 9px 12px;
  color: #8794A1; font-family: inherit;
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.ibl-more:hover { color: #12161A; border-color: #8794A1; }

.ibl-empty { font-size: 13px; line-height: 1.55; color: #5B6672; margin: 0 0 18px; }

/* ---- state 3 · booked --------------------------------------- */
.ibl-tick {
  width: 44px; height: 44px; border-radius: 4px;
  background: var(--electric, #075DC6);
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 16px;
}
.ibl-appt {
  background: #F4F6F8;
  border: 1px solid #DDE3E9;
  border-left: 3px solid var(--electric, #075DC6);
  padding: 15px 17px; margin: 0 0 16px;
}
.ibl-appt-w {
  font-family: var(--F-cond, "Barlow Condensed", Oswald, Impact, sans-serif);
  font-weight: 900; font-size: 23px; letter-spacing: 0.03em;
  text-transform: uppercase; color: #12161A;
}
.ibl-appt-a { font-size: 12.5px; line-height: 1.5; color: #5B6672; margin-top: 8px; }
.ibl-sent { font-size: 13px; line-height: 1.6; color: #5B6672; margin: 0 0 16px; }
.ibl-sent b { color: #12161A; }
.ibl-prep { display: grid; gap: 8px; margin: 0 0 18px; }
.ibl-prep-i { display: grid; grid-template-columns: 15px 1fr; gap: 10px; font-size: 12.5px; line-height: 1.5; color: #5B6672; }
.ibl-prep-i svg { margin-top: 3px; }
.ibl-done-row { display: flex; gap: 9px; }
.ibl-done-row > * { flex: 1; padding: 13px; font-size: 11px; }
.ibl-btn-ghost {
  background: #FFFFFF; border: 1px solid #C3CCD6;
  border-radius: 4px; color: #12161A; font-family: inherit;
  font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: border-color 120ms ease;
}
.ibl-btn-ghost:hover { border-color: var(--electric, #075DC6); }

/* ---- phone: a bottom sheet ---------------------------------- */
@media (max-width: 560px) {
  .ibl-scrim { background: rgba(5, 5, 5, 0.8); align-items: flex-end; padding: 0; }
  .ibl-modal {
    width: 100%; max-width: 100%;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 18px 18px 16px;
  }
  /* The sheet comes up from the bottom edge rather than easing down onto it. */
  @keyframes ibl-rise { from { transform: translateY(16px); } to { transform: translateY(0); } }
  .ibl-grab {
    display: block; width: 38px; height: 3px; border-radius: 2px;
    background: #DDE3E9;
    margin: 0 auto 14px;
  }
  .ibl-x { top: 8px; right: 10px; }
  .ibl-h { font-size: 30px; }
  .ibl-days { max-height: 44vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ibl-scrim.is-open .ibl-modal { animation: none; }
  .ibl-btn.is-busy::after { animation-duration: 2s; }
}