/* =========================================================================
   Focusablak lead forms + floating chat (v4)
   One form component for every quote form on the site:
   hero forms (.lead-form--hero) and #ajanlatkeres sections.
   Markup hook: form[data-lead-form]  (behaviour in assets/forms.js)
   ========================================================================= */

/* ---------- Card shell ---------- */
.lead-form.form-card {
  background: #fff;
  color: #3d4a53;
  border: 1px solid #dde3e7;
  border-top: 3px solid var(--brand, #0088cc);
  border-radius: var(--radius-global, 6px);
  box-shadow: 0 1px 0 rgba(0, 17, 26, .04), 0 18px 40px -28px rgba(0, 17, 26, .28);
  padding: 40px;
  text-align: left;
}
.lead-form--hero.form-card {
  padding: 32px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
  width: 100%;
}
.lead-form .form-step { animation: lfIn .32s ease-out; }
@keyframes lfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Header: step number, title, description ---------- */
.lead-form .lf-stepno {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px/1 Manrope, "Segoe UI", sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: #006b9e; margin-bottom: 14px;
}
.lead-form .lf-stepno::before { content: ""; width: 22px; height: 2px; background: var(--brand, #0088cc); }
.lead-form h3 {
  font: 700 24px/1.25 Manrope, "Segoe UI", sans-serif;
  letter-spacing: -.01em; color: #00111a; margin: 0 0 8px;
}
.lead-form--hero h3 { font-size: 23px; }
.lead-form .form-step > p,
.lead-form .lf-desc {
  font-size: 15px; line-height: 1.55; color: #576875; margin: 0 0 22px;
}
.lead-form .lf-picked { font-size: 14.5px; color: #576875; margin: 0 0 22px; }
.lead-form .lf-picked strong { color: #00111a; font-weight: 700; }

/* ---------- Multi-select product cards (checkboxes under the cards) ---------- */
.lead-form .lf-cards {
  border: 0; margin: 0 0 24px; padding: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.lead-form .lf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lead-form .lf-card { position: relative; display: block; margin: 0; cursor: pointer; }
.lead-form .lf-card input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.lead-form .lf-card-in {
  position: relative; height: 100%; min-height: 112px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 14px 18px; text-align: center;
  background: #fff; border: 1px solid #dde3e7; border-radius: var(--radius-global, 6px);
  transition: border-color .18s, background-color .18s, box-shadow .18s;
  user-select: none;
}
.lead-form .lf-card-in i { font-size: 28px; line-height: 1; color: #004d73; transition: color .18s; }
.lead-form .lf-card-in > span:not(.lf-tick) {
  font: 700 14.5px/1.3 Manrope, "Segoe UI", sans-serif; color: #00111a;
}
.lead-form .lf-tick {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid #c3d0d8; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .18s, border-color .18s;
}
.lead-form .lf-tick::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg); opacity: 0; transition: opacity .18s;
}
.lead-form .lf-card:hover .lf-card-in { border-color: #8fbfd9; }
.lead-form .lf-card input:checked + .lf-card-in {
  border-color: var(--brand, #0088cc); background: #e6f4fa;
  box-shadow: inset 0 0 0 1px var(--brand, #0088cc);
}
.lead-form .lf-card input:checked + .lf-card-in i { color: var(--brand, #0088cc); }
.lead-form .lf-card input:checked + .lf-card-in .lf-tick { background: var(--brand, #0088cc); border-color: var(--brand, #0088cc); }
.lead-form .lf-card input:checked + .lf-card-in .lf-tick::after { opacity: 1; }
.lead-form .lf-card input:focus-visible + .lf-card-in { outline: 2px solid var(--brand, #0088cc); outline-offset: 3px; }

/* ---------- Fields ---------- */
.lead-form .input-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.lead-form .input-group label {
  font: 700 14px/1.3 Manrope, "Segoe UI", sans-serif; color: #00111a;
}
.lead-form .input-group input,
.lead-form .input-group textarea {
  width: 100%; height: 50px; padding: 12px 15px;
  font: 500 15.5px/1.4 Manrope, "Segoe UI", sans-serif; color: #00111a;
  background: #fff; border: 1px solid #c9d6de; border-radius: var(--radius-global, 6px);
  transition: border-color .18s, box-shadow .18s;
}
.lead-form .input-group textarea { height: auto; min-height: 112px; resize: vertical; }
.lead-form .input-group input::placeholder,
.lead-form .input-group textarea::placeholder { color: #8796a0; }
.lead-form .input-group input:hover,
.lead-form .input-group textarea:hover { border-color: #9fb3bf; }
.lead-form .input-group input:focus,
.lead-form .input-group textarea:focus {
  outline: none; border-color: var(--brand, #0088cc);
  box-shadow: 0 0 0 3px rgba(0, 136, 204, .16); background: #fff;
}
.lead-form.lf-tried input:invalid,
.lead-form.lf-tried textarea:invalid { border-color: #c2412d; }
.lead-form .lf-consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: #576875; margin: 4px 0 20px;
}
.lead-form .lf-consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #0088cc; }
.lead-form .lf-consent a { color: #006b9e; text-decoration: underline; text-underline-offset: 2px; }
.lead-form.lf-tried .lf-consent input:invalid { outline: 2px solid #c2412d; outline-offset: 2px; }

/* ---------- Buttons ---------- */
.lead-form .btn-primary,
.lead-form .btn-secondary { justify-content: center; min-height: 54px; }
.lead-form [data-next] { width: 100%; }
.lead-form .btn-primary:disabled { opacity: 1; background: #b8c7d0; border-color: #b8c7d0; color: #fff; }

/* ---------- Hero placement ---------- */
.lead-form--hero .lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.lead-form--hero .lf-card-in { min-height: 104px; padding: 20px 12px 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lead-form .lf-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lead-form.form-card, .lead-form--hero.form-card { padding: 24px 20px; }
  .lead-form h3 { font-size: 21px; }
  .lead-form .lf-cards { gap: 10px; }
  .lead-form .lf-card-in { min-height: 98px; padding: 18px 10px 14px; }
  .lead-form .lf-card-in > span:not(.lf-tick) { font-size: 13.5px; }
  .lead-form--hero .lf-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Floating chat: same look as before, opened by click/tap instead of hover.
   base.css opens it on .widget-chat:hover. Those hover rules are cancelled
   here unless the widget carries .is-open (set by forms.js).
   ========================================================================= */
.widget-chat:not(.is-open):hover {
  width: 60px; height: 60px; background: var(--brand, #0088cc);
  border-radius: 30px; box-shadow: 0 10px 25px rgba(0, 136, 204, .3);
}
.widget-chat:not(.is-open):hover .icon-wrapper { display: flex; }
.widget-chat:not(.is-open):hover .chat-window { opacity: 0; pointer-events: none; transition-delay: 0s; }
.widget-chat .icon-wrapper:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 50%; }

.widget-chat.is-open {
  width: 450px; height: 600px; max-height: calc(100vh - 60px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .2); background: var(--white, #fff); border-radius: 12px;
}
.widget-chat.is-open .icon-wrapper { display: none; }
.widget-chat.is-open .chat-window { opacity: 1; pointer-events: all; transition-delay: .15s; }

.widget-chat .chat-header { position: relative; padding-right: 84px; }
.widget-chat .chat-close {
  position: absolute; top: 26px; right: 24px;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; font-size: 18px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4);
  transition: background-color .2s, border-color .2s;
}
.widget-chat .chat-close:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.widget-chat .chat-close:focus-visible { outline: 2px solid #8fd3f7; outline-offset: 2px; }

@media (max-width: 576px) {
  .widget-chat:not(.is-open):hover { width: 54px; height: 54px; right: 16px; bottom: 24px; }
  .widget-chat.is-open {
    width: calc(100vw - 40px); height: calc(100vh - 40px); height: calc(100dvh - 40px);
    max-height: none; right: 20px; bottom: 20px;
  }
  .widget-chat .chat-header { padding: 28px 76px 24px 28px; }
  .widget-chat .chat-close { top: 20px; right: 18px; }
  .widget-chat .chat-body { padding: 28px; overflow-y: auto; }
}
.widget-chat:not(.is-open) .chat-window { visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.widget-chat.is-open .chat-window { visibility: visible; transition: opacity .2s .15s, visibility 0s .15s; }

/* Neutralise the old .hero-quote field rules (changes.css) inside the new component */
.lead-form.hero-quote .input-group label { display: block; margin: 0; font-size: 14px; }
.lead-form.hero-quote .input-group input { margin: 0; height: 50px; }
.lead-form.hero-quote .lf-card { margin: 0; font-size: inherit; }
.lead-form .lf-consent { font-weight: 400; font-size: 14px; margin-bottom: 20px; }
.lead-form.hero-quote .btn-primary { margin-top: 0; font-size: 15.5px; }

/* ---------- v5: survey address + photo / floor-plan attachments ----------
   The real file input is visually hidden. The dashed .lf-drop label opens it
   and forms.js writes the chosen file names (or the limit error) into it. */
.lead-form .lf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lead-form .lf-opt { font-weight: 500; color: #64717a; }
.lead-form .input-group label.lf-drop {
  display: flex; align-items: center; gap: 10px; min-height: 50px; margin: 0; padding: 12px 15px;
  font: 600 15px/1.35 Manrope, "Segoe UI", sans-serif; color: #006b9e; cursor: pointer;
  background: #f5f9fb; border: 1px dashed #9fb3bf; border-radius: var(--radius-global, 6px);
  transition: border-color .18s, background .18s;
}
.lead-form .input-group label.lf-drop:hover { border-color: var(--brand, #0088cc); background: #eef6fa; }
.lead-form .lf-files:focus-within label.lf-drop { border-color: var(--brand, #0088cc); box-shadow: 0 0 0 3px rgba(0, 136, 204, .16); }
.lead-form .lf-drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lead-form .lf-files.has-files label.lf-drop { color: #00111a; border-style: solid; }
.lead-form .lf-files.has-error label.lf-drop { color: #c2412d; border-color: #c2412d; }
.lead-form .lf-hint { font-size: 12.5px; color: #64717a; line-height: 1.4; }

/* v5 QA: long file-name lists must not widen the hero grid column (zero-width span, grows to fill). */
.lead-form--hero, .lead-form .lf-files, .lead-form label.lf-drop { min-width: 0; }
.lead-form .lf-drop span { flex: 1 1 0; width: 0; }