/* Twin Brothers Coatings epoxy funnel: the survey card, the booking calendar
   and the plain forms. Ported from the Liquid Designs engine (which was built
   off this very funnel's GoHighLevel survey), repainted in Twin Brothers'
   own survey colours: the green #18BD5B of GoHighLevel's survey button and the
   green #37CA37 of the page's FREE highlight, with near black ink.

   GoHighLevel puts WHITE text on #18BD5B, which measures about 2.4:1 and fails
   WCAG AA. Green is used here as a ground with near black ink (about 8.9:1)
   instead. That is the only deliberate visual departure from the live survey.

   Everything is namespaced under .ld so it cannot fight the GoHighLevel page
   CSS the shell still carries. The shell itself is NOT repainted: it is the
   client's own page. */
.ld{
  --ld-navy:#161616;--ld-navy-2:#2a2a2a;--ld-cyan:#18bd5b;--ld-cyan-deep:#14a64f;
  --ld-pink:#37ca37;--ld-ink:#0b0b18;--ld-mute:#5a5f74;--ld-line:rgba(11,11,24,.18);
  --ld-tint:rgba(24,189,91,.13);--ld-tint-2:rgba(24,189,91,.28);
  --ld-danger:#c62828;--ld-ease:cubic-bezier(.22,1,.36,1);
  font-family:Inter,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ld-ink);
  max-width:550px;width:100%;margin:0 auto 44px;text-align:left;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
.ld *,.ld *::before,.ld *::after{box-sizing:border-box}
.ld [hidden]{display:none !important}
.ld button,.ld input,.ld textarea,.ld label{font:inherit;color:inherit;margin:0}
.ld button{-webkit-appearance:none;appearance:none}
.ld p,.ld h2{margin:0}
.ld img{max-width:100%;height:auto;display:block}
.ld :where(button,input,a):focus-visible{outline:2.5px solid var(--ld-navy);outline-offset:2px}
.ld-q:focus,.ld-q:focus-visible,.ld-stage:focus,.ld-stage:focus-visible,.ld-gate:focus,.ld-gate:focus-visible{outline:none}

.ld-card{background:#fff;border-radius:12px;position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(11,11,24,.07),0 14px 38px rgba(11,11,24,.10)}
.ld-bar{height:6px;background:rgba(11,11,24,.10)}
.ld-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ld-cyan),var(--ld-pink));
  transform-origin:left;transform:scaleX(0);transition:transform .45s var(--ld-ease)}
.ld-body{padding:28px 38px 30px}
/* the card sits clear of each screen edge on a phone */
@media (max-width:640px){.ld{padding-inline:18px;margin-bottom:28px}}
@media (max-width:480px){.ld-body{padding:22px 18px 24px}}

/* one question at a time */
.ld-q{display:none}
.ld-q[data-on="true"]{display:block;animation:ldIn .34s var(--ld-ease) both}
.ld-q[data-on="true"].is-back{animation-name:ldBack}
@keyframes ldIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes ldBack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.ld-h{font-family:Inter,Roboto,sans-serif;font-size:16px;font-weight:700;line-height:1.45;
  color:var(--ld-ink);text-align:center;margin:0 0 17px;padding:0 2px}
.ld-hint{text-align:center;font-size:14px;color:var(--ld-mute);margin:-9px 0 16px}

/* radio rows */
.ld-opts{display:grid;gap:9px;margin:0 0 16px}
.ld-radio{position:relative}
.ld-radio input{position:absolute;opacity:0;width:0;height:0;margin:0}
.ld-radio label{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;
  padding:12px 14px;border:1.5px solid var(--ld-line);border-radius:9px;background:#fff;
  min-height:52px;transition:border-color .15s,background .15s;font-weight:400}
.ld-radio label:hover{border-color:rgba(11,11,24,.5)}
.ld-radio input:focus-visible+label{outline:2.5px solid var(--ld-navy);outline-offset:2px}
.ld-radio input:checked+label{border-color:var(--ld-navy);background:var(--ld-tint)}
.ld-radio__dot{width:19px;height:19px;border-radius:50%;border:1.5px solid #6b6b78;flex:0 0 auto;
  position:relative;background:#fff;transition:border-color .15s}
.ld-radio__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ld-navy);
  transform:scale(0);transition:transform .15s var(--ld-ease)}
.ld-radio input:checked+label .ld-radio__dot{border-color:var(--ld-navy)}
.ld-radio input:checked+label .ld-radio__dot::after{transform:scale(1)}
.ld-radio__t{font-size:15px;line-height:1.45;color:var(--ld-ink)}

/* image tiles */
.ld-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0 0 16px}
@media (min-width:480px){.ld-tiles{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}}
.ld-tile{position:relative;min-width:0}
.ld-tile input{position:absolute;opacity:0;width:0;height:0;margin:0}
.ld-tile label{display:flex;flex-direction:column;height:100%;cursor:pointer;overflow:hidden;
  border:2px solid rgba(11,11,24,.14);border-radius:10px;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.ld-tile label:hover{border-color:rgba(11,11,24,.5)}
.ld-tile input:focus-visible+label{outline:2.5px solid var(--ld-navy);outline-offset:2px}
.ld-tile input:checked+label{border-color:var(--ld-navy);box-shadow:0 0 0 1px var(--ld-navy)}
.ld-tile__img{display:flex;align-items:center;justify-content:center;padding:8px 8px 6px}
.ld-tile__img img{width:78px;height:78px;object-fit:contain}
@media (min-width:480px){.ld-tile__img img{width:88px;height:88px}}
.ld-tile__t{display:flex;align-items:center;justify-content:center;text-align:center;flex:1 1 auto;
  background:var(--ld-navy);color:#fff;font-weight:700;font-size:14.5px;line-height:1.3;padding:10px 8px;min-height:56px;
  transition:background .15s,color .15s}
.ld-tile input:checked+label .ld-tile__t{background:var(--ld-cyan);color:var(--ld-navy)}

/* text fields. 16px on a phone so iOS never zooms the page on focus. */
.ld-fields{margin:0}
.ld-f{margin:0 0 15px;position:relative}
.ld-f input,.ld-f textarea{display:block;width:100%;font-family:Inter,Roboto,sans-serif;font-size:16px;
  font-weight:400;color:var(--ld-ink);background:#fff;border:1.5px solid rgba(11,11,24,.42);border-radius:9px;
  padding:12px 16px;line-height:1.4;min-height:50px;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s}
.ld-f textarea{min-height:96px;resize:vertical}
.ld-f input::placeholder,.ld-f textarea::placeholder{color:#6d7082;font-weight:400;opacity:1}
.ld-f input:focus,.ld-f textarea:focus{border-color:var(--ld-navy);box-shadow:0 0 0 3px var(--ld-tint-2)}
.ld-f input[aria-invalid="true"]{border-color:var(--ld-danger);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.ld-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ld-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ld-err{color:var(--ld-danger);font-size:13.5px;font-weight:600;margin:0 0 12px;text-align:center;line-height:1.4}
.ld-err:empty{display:none}

/* footer bar. On a phone the whole bar is the brand cyan with navy on it, the
   way the reference's bar is one solid colour; on a wide screen the bar is
   navy and only the NEXT block is cyan. */
.ld-foot{display:flex;align-items:center;height:52px;background:var(--ld-navy);border-radius:0 0 12px 12px;
  color:#fff;font-family:Inter,Roboto,sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em}
.ld-prev,.ld-next{display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 24px;border:0;
  background:transparent;color:#fff;cursor:pointer;text-transform:uppercase;font:inherit;white-space:nowrap}
.ld-prev{opacity:.92;border-radius:0 0 0 12px}
.ld-prev:hover{opacity:1;background:rgba(255,255,255,.12)}
.ld-foot .ld-next{margin-left:auto;background:var(--ld-cyan);color:var(--ld-navy);border-radius:0 0 12px 0;font-weight:800}
.ld-next:hover{background:var(--ld-cyan-deep)}
.ld-next[disabled]{cursor:progress}
.ld-next__steps{display:none}
.ld-next__arrow,.ld-prev__arrow{display:inline-flex;align-items:center}
.ld-next__arrow svg,.ld-prev__arrow svg{width:17px;height:17px;display:block}
.ld-next.is-busy .ld-next__arrow{display:none}
.ld-next.is-busy .ld-next__spin{display:inline-block !important;border-color:rgba(22,22,22,.3);border-top-color:var(--ld-navy)}
@media (max-width:640px){
  .ld-foot{background:var(--ld-cyan);color:var(--ld-navy);display:grid;grid-template-columns:58px 1fr 58px;
    font-weight:700;font-size:15px;letter-spacing:0}
  .ld-prev{grid-column:1;justify-content:center;padding:0;color:var(--ld-navy);opacity:1}
  .ld-prev:hover{background:rgba(22,22,22,.10)}
  .ld-prev__label,.ld-next__label{display:none}
  .ld-foot .ld-next{grid-column:2 / 4;display:grid;grid-template-columns:1fr 58px;padding:0;margin:0;
    background:transparent;color:var(--ld-navy);border-radius:0 0 12px 0}
  .ld-foot .ld-next:hover{background:rgba(22,22,22,.10)}
  .ld-next__steps{display:block;grid-column:1;text-align:center;text-transform:none;font-weight:800}
  .ld-next__arrow,.ld-next__spin{grid-column:2;justify-self:center}
  .ld-next svg,.ld-prev svg{width:22px;height:22px}
}

/* gate panel: the reference's disqualified card, white and centred */
.ld-gate{text-align:center;padding:14px 4px 6px;animation:ldIn .34s var(--ld-ease) both}
.ld-gate:focus{outline:none}
.ld-gate__h{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--ld-ink)}
.ld-gate__b{font-size:15px;color:#33364a;max-width:42ch;margin:0 auto 18px;font-weight:400}

/* buttons. Cyan is a ground, never ink: every cyan button carries navy text. */
.ld-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;
  border:0;border-radius:10px;background:var(--ld-cyan);color:var(--ld-navy);font-family:Inter,Roboto,sans-serif;font-size:15.5px;
  font-weight:800;cursor:pointer;text-decoration:none;text-transform:none;letter-spacing:0;line-height:1.2;
  transition:background .15s,transform .1s}
.ld-btn:hover{background:var(--ld-cyan-deep);color:var(--ld-navy)}
.ld-btn:active{transform:translateY(1px)}
.ld-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.ld-btn--wide{width:100%}
.ld-btn--ghost{background:#fff;color:var(--ld-navy);box-shadow:inset 0 0 0 1.75px var(--ld-navy)}
.ld-btn--ghost:hover{background:var(--ld-tint);color:var(--ld-navy)}
.ld-btn svg{width:16px;height:16px;flex:0 0 auto}

/* the booking stage, inline in the survey card and standalone on /booking */
.ld-stage{animation:ldIn .36s var(--ld-ease) both}
.ld-stage:focus{outline:none}
.ld-h--bk{margin-bottom:8px;font-size:17.5px}
.ld-bk__who{text-align:center;font-size:14px;color:var(--ld-mute);margin:0 0 12px}
.ld-bk__load{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ld-mute);font-size:14px;padding:14px 0}
.ld-spin{width:16px;height:16px;border:2px solid rgba(11,11,24,.14);border-top-color:var(--ld-navy);border-radius:50%;
  animation:ldSp .7s linear infinite;display:inline-block;flex:0 0 auto}
@keyframes ldSp{to{transform:rotate(360deg)}}
.ld-bk__grid{display:grid;gap:20px}
@media (min-width:700px){.ld-bk__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:28px}}
.ld-cal__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.ld-cal__month{font-weight:700;font-size:15px;color:var(--ld-ink)}
.ld-cal__nav{width:44px;height:44px;border-radius:50%;border:0;background:var(--ld-tint);color:var(--ld-navy);
  display:grid;place-items:center;cursor:pointer;padding:0}
.ld-cal__nav:hover{background:var(--ld-tint-2)}
.ld-cal__nav[disabled]{opacity:.35;cursor:default;background:var(--ld-tint)}
.ld-cal__nav svg{width:16px;height:16px;display:block}
.ld-cal__dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;font-weight:700;color:#33364a;margin:0 0 4px}
.ld-cal__days{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
/* seven 44px tap targets have to fit a 360px phone, so on a narrow screen the
   calendar bleeds out past the card's own padding rather than shrinking them */
@media (max-width:430px){.ld-cal{margin-inline:-12px}}
.ld-day{display:grid;place-items:center;height:48px}
.ld-day button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:rgba(11,11,24,.45);
  font:inherit;font-size:14.5px;font-weight:500;cursor:default;padding:0;transition:background .12s,color .12s}
.ld-day button.is-open{background:var(--ld-tint);color:var(--ld-navy);font-weight:800;cursor:pointer}
.ld-day button.is-open:hover{background:var(--ld-tint-2)}
.ld-day button.is-sel,.ld-day button.is-open.is-sel{background:var(--ld-navy);color:#fff}
.ld-day button.is-today:not(.is-sel){box-shadow:inset 0 0 0 1.5px rgba(11,11,24,.45)}
.ld-bk__tz{font-size:12.5px;color:var(--ld-mute);margin:10px 0 0;text-align:center;line-height:1.45}
.ld-bk__tz--warn{color:#7a4300;font-weight:700}
.ld-slots__h{font-weight:700;font-size:15px;margin:0 0 10px;text-align:center;color:var(--ld-ink)}
.ld-slots__list{display:grid;gap:8px;max-height:296px;overflow-y:auto;padding:2px;margin:0 0 14px;scrollbar-width:thin}
.ld-slot{height:48px;border:1.5px solid var(--ld-navy);border-radius:9px;background:#fff;color:var(--ld-navy);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .12s,color .12s;padding:0}
.ld-slot:hover{background:var(--ld-tint)}
.ld-slot[aria-selected="true"]{background:var(--ld-navy);color:#fff}
.ld-slots__empty{padding:18px 12px;text-align:center;color:var(--ld-mute);font-size:14px;background:#f5f7f9;border-radius:9px}
.ld-bk__note{font-size:12.5px;color:var(--ld-mute);text-align:center;margin:12px 0 0;line-height:1.5}
.ld-bk__note a{color:var(--ld-navy);font-weight:700;text-decoration:underline}

/* /booking: the standalone card sits where the GoHighLevel calendar card was */
.ld--booking{max-width:760px;margin-bottom:36px}
.ld--booking .ld-card{border:1px solid rgba(11,11,24,.10);box-shadow:0 1px 3px rgba(11,11,24,.06),0 10px 28px rgba(11,11,24,.08)}
.ld--booking .ld-body{padding:28px 32px 30px}
@media (max-width:480px){.ld--booking .ld-body{padding:22px 18px 24px}}

@media (prefers-reduced-motion:reduce){
  .ld-q[data-on="true"],.ld-stage,.ld-gate{animation:none}
  .ld-bar i{transition:none}
  .ld-spin{animation-duration:1.6s}
}


/* additions for Twin Brothers */
.ld-badge{display:block;margin:6px auto 14px;width:125px;height:auto}
.ld-f textarea{width:100%;min-height:88px;border:1.5px solid var(--ld-line);border-radius:9px;padding:12px 14px;
  font-size:16px;background:#fff;resize:vertical}
.ld-f textarea:focus{outline:none;border-color:var(--ld-navy)}
.ld-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ld-mute);margin:0 0 12px;cursor:pointer}
.ld-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--ld-cyan-deep)}
.ld-done{font-size:16px;font-weight:600;text-align:center;line-height:1.5;padding:18px 6px;color:var(--ld-ink)}
.ld--plain{max-width:560px;margin:12px auto 36px}
.ld--plain .ld-card{border:1px solid rgba(11,11,24,.10)}