/* Stafflancer Lead Forms — Frontend (fully isolated)
   IMPORTANT: every selector is scoped to #slf-root so it cannot affect site layout.
*/

#slf-root{
  position:relative;
  --slf-x: 24px;
  --slf-y: 24px;
  --slf-pt-scale: 1;
  --slf-icon-scale: 1.2;
}

#slf-root .slf-float{
  position:fixed;
  z-index:999999;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  cursor:pointer;
}

/* Ensure floating button stays crisp black on white in dark mode */
#slf-root .slf-float.slc-keep-black{ color:#000 !important; }

/* Icon swap: show light icon by default, dark icon only when JS marks theme as dark */
#slf-root .slf-icon--dark{ display:none; }
#slf-root[data-slf-theme="dark"] .slf-icon--dark{ display:inline-flex; }
#slf-root[data-slf-theme="dark"] .slf-icon--light{ display:none; }

/* Never let global dark-mode filters affect the floating icon */
#slf-root .slf-float__icon img,
#slf-root .slf-float__icon svg{ filter:none !important; opacity:1 !important; mix-blend-mode:normal !important; }


/* Cookie banner layering (additive)
   Goal: keep the cookie banner ABOVE the floating button, without affecting the modal.
   We avoid setting z-index on #slf-root so the modal can still sit above everything.
*/
body.slf-cookie-active #slf-root .slf-float{ z-index: 999998 !important; }
body.slf-cookie-active #slc-cookie{ z-index: 999999 !important; }

/* Position presets (controlled via #slf-root[data-slf-pos]) */
#slf-root[data-slf-pos="br"] .slf-float{
  right: calc(var(--slf-x) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--slf-y) + env(safe-area-inset-bottom, 0px));
  left:auto; top:auto; transform:none;
}
#slf-root[data-slf-pos="bl"] .slf-float{
  left: calc(var(--slf-x) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--slf-y) + env(safe-area-inset-bottom, 0px));
  right:auto; top:auto; transform:none;
}
#slf-root[data-slf-pos="mr"] .slf-float{
  right: calc(var(--slf-x) + env(safe-area-inset-right, 0px));
  top: 50%;
  left:auto; bottom:auto;
  transform: translateY(calc(-50% + var(--slf-y)));
}
#slf-root[data-slf-pos="ml"] .slf-float{
  left: calc(var(--slf-x) + env(safe-area-inset-left, 0px));
  top: 50%;
  right:auto; bottom:auto;
  transform: translateY(calc(-50% + var(--slf-y)));
}
#slf-root[data-slf-pos="bc"] .slf-float{
  left: 50%;
  bottom: calc(var(--slf-y) + env(safe-area-inset-bottom, 0px));
  right:auto; top:auto;
  transform: translateX(-50%);
}
#slf-root[data-slf-pos="tc"] .slf-float{
  left: 50%;
  top: calc(var(--slf-y) + env(safe-area-inset-top, 0px));
  right:auto; bottom:auto;
  transform: translateX(-50%);
}

#slf-root .slf-float__icon{ display:inline-flex; }
#slf-root .slf-float__icon img{ width:20px; height:20px; display:block; transform: scale(var(--slf-icon-scale)); transform-origin:center; }
#slf-root .slf-float__icon svg{ width:20px; height:20px; display:block; transform: scale(var(--slf-icon-scale)); transform-origin:center; }
#slf-root .slf-float__text{ font-weight:600; font-size:14px; }

/* Mobile: compact icon-only floating button (prevents overlap with other bottom widgets, e.g., accessibility toggle) */
@media (max-width: 767px){
  #slf-root .slf-float{
    width:56px;
    height:56px;
    min-width:56px;
    padding:0;
    gap:0;
    justify-content:center;
  }
  #slf-root .slf-float__text{ display:none; }
  #slf-root .slf-float__icon img,
  #slf-root .slf-float__icon svg{
    width:22px;
    height:22px;
    transform: scale(var(--slf-icon-scale));
    transform-origin:center;
  }
}

/* Portrait tablet scaling (only affects the floating button) */
#slf-root[data-slf-portrait-tablet="1"] .slf-float{
  transform: translateX(-50%) scale(var(--slf-pt-scale));
  transform-origin: center;
}
#slf-root[data-slf-portrait-tablet="1"][data-slf-pos="br"] .slf-float,
#slf-root[data-slf-portrait-tablet="1"][data-slf-pos="bl"] .slf-float{
  transform: scale(var(--slf-pt-scale));
}
#slf-root[data-slf-portrait-tablet="1"][data-slf-pos="mr"] .slf-float,
#slf-root[data-slf-portrait-tablet="1"][data-slf-pos="ml"] .slf-float{
  transform: translateY(calc(-50% + var(--slf-y))) scale(var(--slf-pt-scale));
}

#slf-root .slf-modal{ position:fixed; inset:0; z-index:1000000; display:none; }
#slf-root .slf-modal.is-open{ display:block; }
#slf-root .slf-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
#slf-root .slf-modal__panel{
  position:relative;
  width:min(70vw, calc(100% - 32px));
  margin:70px auto 0;
  background:#fff;
  border-radius:20px;
  padding:18px 18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  max-height: calc(100vh - 110px);
  overflow:auto;
}
#slf-root .slf-modal__close{
  /* Sticky so it stays visible while the panel scrolls */
  position: sticky;
  top:10px;
  margin-left:auto;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}
#slf-root .slf-modal__title{ margin:0 0 12px; font-size:18px; letter-spacing:-0.01em; }

#slf-root .slf-progress{ margin: 0 0 14px; }
#slf-root .slf-progress__text{ font-size:12px; opacity:.75; margin:0 0 6px; }
#slf-root .slf-progress__bar{ height:8px; border-radius:999px; background:rgba(0,0,0,.10); overflow:hidden; }
#slf-root .slf-progress__fill{ height:100%; width:0%; background:rgba(0,0,0,.55); border-radius:999px; }

#slf-root .slf-step{ margin: 0 0 14px; }
#slf-root .slf-step__title{ margin:0 0 10px; font-size:14px; letter-spacing:-0.01em; }

/* Premium layout: grid fields to reduce form height on desktop/tablet */
#slf-root .slf-fields{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 900px){
  #slf-root .slf-fields{ grid-template-columns: 1fr 1fr; gap:14px 14px; }
  #slf-root .slf-row--full{ grid-column: 1 / -1; }
}

#slf-root .slf-form .slf-row{ margin:0; }
#slf-root .slf-form label{ display:block; font-weight:600; font-size:13px; margin:0 0 6px; }

/* Consent row: checkbox inline + larger tap target */
#slf-root .slf-row--consent label{ margin:0; font-weight:600; }
#slf-root .slf-consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
#slf-root .slf-consent input[type="checkbox"]{
  width:20px;
  height:20px;
  margin:2px 0 0;
  flex:0 0 auto;
}
#slf-root .slf-row--consent .slf-req{ margin-left:4px; }
#slf-root .slf-form input[type="text"],
#slf-root .slf-form input[type="email"],
#slf-root .slf-form input[type="tel"],
#slf-root .slf-form input[type="url"],
#slf-root .slf-form input[type="file"],
#slf-root .slf-form select,
#slf-root .slf-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#111;
  transition: box-shadow .15s ease, border-color .15s ease;

/* Premium file picker */
#slf-root .slf-file{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
}
#slf-root .slf-file__input{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#slf-root .slf-file__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#111;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
#slf-root .slf-file__name{
  font-size:13px;
  font-weight:600;
  opacity:.85;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#slf-root .slf-file.has-file .slf-file__name{ opacity:1; }

}

#slf-root .slf-form input[type="text"]:focus,
#slf-root .slf-form input[type="email"]:focus,
#slf-root .slf-form input[type="tel"]:focus,
#slf-root .slf-form input[type="url"]:focus,
#slf-root .slf-form select:focus,
#slf-root .slf-form textarea:focus{
  outline:none;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 4px rgba(0,0,0,.08);
}

/* Radio / Checkbox groups */
#slf-root .slf-choicegroup{ display:grid; grid-template-columns: 1fr; gap:8px; padding:2px 0; }
@media (min-width: 900px){
  #slf-root .slf-choicegroup{ grid-template-columns: 1fr 1fr; }
}
#slf-root .slf-choice{ display:flex; align-items:flex-start; gap:10px; font-weight:500; font-size:13px; cursor:pointer; }
#slf-root .slf-choice input{ margin-top:2px; }

/* Welcome + Success screens */
#slf-root .slf-step--welcome .slf-welcome__msg,
#slf-root .slf-success__msg{ font-size:13px; line-height:1.5; opacity:.9; }
#slf-root .slf-success{ padding-top:14px; }
#slf-root .slf-success__title{ margin:0 0 10px; font-size:16px; }

/* Privacy link */
#slf-root .slf-privacy{ text-decoration:underline; }
#slf-root .slf-form textarea{ resize:vertical; }
#slf-root .slf-req{ color:#b00020; }
#slf-root .slf-hint{ font-size:12px; opacity:.75; margin-top:6px; }

#slf-root .slf-nav{ display:flex; gap:10px; margin-top:10px; }
#slf-root .slf-nav__back,
#slf-root .slf-nav__next{
  flex:1;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#111;
  font-weight:700;
  cursor:pointer;
}

/* Ensure floating button stays crisp black on white in dark mode */
#slf-root .slf-float.slc-keep-black{ color:#000 !important; }
#slf-root .slf-float.slc-keep-black svg{ color:#000 !important; }

/* Keep default/uploaded floating icon unchanged in dark mode (no filters/inverts) */
#slf-root .slf-keep-icon{ filter:none !important; opacity:1 !important; mix-blend-mode:normal !important; }
html.sl-theme-dark body.slc-dark #slf-root .slf-keep-icon,
body.slc-dark #slf-root .slf-keep-icon{ filter:none !important; opacity:1 !important; mix-blend-mode:normal !important; }

#slf-root .slf-submit{
  flex:1;
  padding:12px 14px;
  border-radius:14px;
  border:0;
  background:#111;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

/* Ensure floating button stays crisp black on white in dark mode */
#slf-root .slf-float.slc-keep-black{ color:#000 !important; }
#slf-root .slf-float.slc-keep-black svg{ color:#000 !important; }

/* Keep default/uploaded floating icon unchanged in dark mode (no filters/inverts) */
#slf-root .slf-keep-icon{ filter:none !important; opacity:1 !important; mix-blend-mode:normal !important; }
html.sl-theme-dark body.slc-dark #slf-root .slf-keep-icon,
body.slc-dark #slf-root .slf-keep-icon{ filter:none !important; opacity:1 !important; mix-blend-mode:normal !important; }



/* Premium button interactions */
#slf-root .slf-nav__back:hover,
#slf-root .slf-nav__next:hover,
#slf-root .slf-file__btn:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
#slf-root .slf-nav__back:active,
#slf-root .slf-nav__next:active,
#slf-root .slf-file__btn:active{
  transform: translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
#slf-root .slf-submit:hover{
  box-shadow:0 14px 28px rgba(0,0,0,.18);
  transform: translateY(-1px);
}
#slf-root .slf-submit:active{
  transform: translateY(0);
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}
#slf-root .slf-nav__back,
#slf-root .slf-nav__next,
#slf-root .slf-submit,
#slf-root .slf-file__btn{
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

#slf-root .slf-submit[disabled],
#slf-root .slf-nav__back[disabled],
#slf-root .slf-nav__next[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

#slf-root .slf-note{ margin-top:10px; font-size:13px; }
#slf-root .slf-note.is-ok{ color:#0b6b2e; }
#slf-root .slf-note.is-bad{
  color:#b00020;
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  text-align:center;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  padding:14px 14px;
  border-radius:14px;
  margin-top:14px;
}

/* Mobile + portrait tablet: full-width / full-height modal */
@media (max-width: 820px){
  #slf-root .slf-modal__panel{
    width: 100vw;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
    padding: 18px 16px 16px;
  }
  #slf-root .slf-modal__close{
  /* Sticky so it stays visible while the panel scrolls */
  position: sticky;
  top:10px;
  margin-left:auto;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}
}

/* Small phones: keep button full-width centered (safe) */
@media (max-width: 520px){
  #slf-root .slf-float{ left:16px; right:16px; justify-content:center; }
  #slf-root[data-slf-pos] .slf-float{ left:16px; right:16px; top:auto; transform:none; }
}

/* Device visibility */
@media (max-width: 767px){
  #slf-root[data-slf-show-mobile="0"] .slf-float,
  #slf-root[data-slf-show-mobile="0"] .slf-modal{ display:none !important; }
}
@media (min-width: 768px) and (max-width: 1024px){
  #slf-root[data-slf-show-tablet="0"] .slf-float,
  #slf-root[data-slf-show-tablet="0"] .slf-modal{ display:none !important; }
}
@media (min-width: 1025px){
  #slf-root[data-slf-show-desktop="0"] .slf-float,
  #slf-root[data-slf-show-desktop="0"] .slf-modal{ display:none !important; }
}



/* v0.2.9.5 — requested UI fixes (additive, scoped) */

/* 1px border on all buttons */
#slf-root button,
#slf-root .slf-btn,
#slf-root .slf-nav__back,
#slf-root .slf-nav__next,
#slf-root .slf-submit,
#slf-root .slf-file__btn{
  border:1px solid rgba(0,0,0,.18) !important;
}

/* Keep success screen text black in dark mode */
body.slc-dark #slf-root .slf-success,
body.slc-dark #slf-root .slf-success *{
  color:#000 !important;
}



/* v0.2.9.6 — enforce keep-black inside Lead Forms in dark mode */
html.sl-theme-dark body.slc-dark #slf-root .slc-keep-black,
html.sl-theme-dark body.slc-dark #slf-root .slc-keep-black *,
body.slc-dark #slf-root .slc-keep-black,
body.slc-dark #slf-root .slc-keep-black *{
  color:#000 !important;
}

/* v0.2.9.6 — success screen text must remain black */
html.sl-theme-dark body.slc-dark #slf-root .slf-success,
html.sl-theme-dark body.slc-dark #slf-root .slf-success *,
body.slc-dark #slf-root .slf-success,
body.slc-dark #slf-root .slf-success *{
  color:#000 !important;
}

/* v0.2.9.6 — ensure submit button background stays white when keep-black is applied */
body.slc-dark #slf-root .slf-submit.slc-keep-black{
  background:#fff !important;
}



/* v0.2.9.7 — Stafflancer premium white-button theme (scoped, additive)
   - All buttons: white bg + black text + 1px border
   - All text stays black in dark mode inside Lead Forms modal
   - Inputs stay white/black
*/

/* Modal stays light even when site is dark */
#slf-root .slf-modal__panel{
  background:#fff !important;
  color:#000 !important;
}

/* Force all text inside the modal to stay black (beats global dark-mode heading rules) */
#slf-root .slf-modal__panel,
#slf-root .slf-modal__panel *{
  color:#000 !important;
}

/* Inputs: white bg + black text */
#slf-root input[type="text"],
#slf-root input[type="email"],
#slf-root input[type="tel"],
#slf-root input[type="url"],
#slf-root select,
#slf-root textarea{
  background:#fff !important;
  color:#000 !important;
  border:1px solid rgba(0,0,0,.14) !important;
}

/* Buttons: white bg + black text + 1px border */
#slf-root button,
#slf-root .slf-btn,
#slf-root .slf-nav__back,
#slf-root .slf-nav__next,
#slf-root .slf-submit,
#slf-root .slf-file__btn,
#slf-root .slf-modal__close,
#slf-root .slf-float{
  background:#fff !important;
  color:#000 !important;
  border:1px solid rgba(0,0,0,.18) !important;
}

/* Close icon stays black */
#slf-root .slf-modal__close svg,
#slf-root .slf-modal__close path,
#slf-root .slf-modal__close line{
  stroke:#000 !important;
}

/* Hover: subtle darken, keep text black */
#slf-root button:hover,
#slf-root .slf-float:hover{
  filter:brightness(.97);
}

/* Success screen stays black */
#slf-root .slf-success,
#slf-root .slf-success *{
  color:#000 !important;
}


/* Design controls (from Builder) */
.slf-space--compact .slf-fields{gap:10px}
.slf-space--compact .slf-field{margin:0 0 10px}
.slf-space--compact .slf-nav{margin-top:10px}

.slf-space--normal .slf-fields{gap:16px}
.slf-space--normal .slf-field{margin:0 0 14px}
.slf-space--normal .slf-nav{margin-top:16px}

.slf-step--welcome{padding:16px;border:1px solid rgba(0,0,0,.06);border-radius:14px}
.slf-success{padding:18px;border:1px solid rgba(0,0,0,.06);border-radius:14px}


/* Prevent background scroll bounce when Lead Forms modal is open */
body.slf-modal-open{
  overscroll-behavior: contain;
}