/* ==========================================
   Fluent Forms – Job Form Skin
   Scope: .ff-skin--jobs
   (FINAL – single source of truth for mobile arrow)
========================================== */

.ff-skin--jobs{
  /* === Colors === */
  --btn-bg: #2f4f46;
  --btn-bg-hover: #27443d;
  --btn-fg: #ffffff;
  --btn-border: #2f4f46;

  --upload-bg: transparent;
  --upload-fg: #2f4f46;
  --upload-border: #2f4f46;

  --arrow-size: 18px;
  --arrow-rot: 45deg;

  /* Absolute path so mask always works */
  --arrow-mask: url("/wp-content/themes/konovalenko/assets/icons/arrow-right.svg");
}

/* ==========================================
   Layout: upload left, submit right
========================================== */
.ff-skin--jobs .ff_submit_btn_wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

/* ==========================================
   SUBMIT BUTTON (DESKTOP)
   - Arrow is ABSOLUTE on desktop
========================================== */

/* Kill any previous pseudo arrow (from other rules) */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::after,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::after,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]::after{
  content: none !important;
}

/* Base button styling */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"],
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]{
  appearance: none;
  border: 1px solid var(--btn-border) !important;
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;

  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 12px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;

  border-radius: 3px !important;
  padding-right: 42px; /* reserve space for absolute arrow on desktop */
  padding-left: 10px;

  min-height: 52px !important;

  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 18px !important;

  cursor: pointer;
  transition: background-color .2s ease;
  position: relative !important;
}

/* Keep any injected spans from wrapping */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn *,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"] *,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"] *{
  white-space: nowrap !important;
}

/* Hover bg */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn:hover,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]:hover,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]:hover{
  background: var(--btn-bg-hover) !important;
}

/* Hide loaders/spinners that can cause layout shift */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn-loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff_btn_loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-el-loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-el-spinner,
.ff-skin--jobs .ff_submit_btn_wrapper .ff_loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-loading{
  display: none !important;
}

/* Desktop arrow (absolute) */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::before,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::before,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]::before{
  content: "" !important;
  width: var(--arrow-size) !important;
  height: var(--arrow-size) !important;

  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;

  background: var(--c-green_300) !important;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat !important;
          mask: var(--arrow-mask) center / contain no-repeat !important;

  opacity: .95 !important;
  pointer-events: none !important;
  transition: transform .22s ease !important;
}

@media (hover:hover){
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn:hover::before,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]:hover::before,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]:hover::before{
    transform: translateY(-50%) rotate(var(--arrow-rot)) !important;
  }
}

/* Lock on submit/loading */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-loading,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-submitting,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-loading,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-submitting,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"].ff-btn-loading,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"].ff-btn-submitting{
  transform: none !important;
  opacity: 1 !important;
}

.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-loading::before,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-submitting::before,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-loading::before,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-submitting::before,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"].ff-btn-loading::before,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"].ff-btn-submitting::before{
  transform: translateY(-50%) rotate(0deg) !important;
  transition: none !important;
}

/* Prevent "pressed" shift */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn:active,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]:active,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]:active{
  transform: none !important;
}

/* ==========================================
   UPLOAD BUTTON (Fluent native)
   - Uses ::after mask
========================================== */

.ff-default .ff_btn_style:focus,
.ff-default .ff_btn_style:hover{
  opacity: 1 !important;
  outline: 0;
  text-decoration: none;
}

/* Strong target for Fluent upload button */
.ff-skin--jobs .ff_file_upload_holder .ff_upload_btn.ff-btn,
.ff-skin--jobs .ff-el-input--file .ff_upload_btn,
.ff-skin--jobs .ff-el-input--file .ff-file-upload,
.ff-skin--jobs .ff-el-input--file label.ff_upload_btn,
.ff-skin--jobs .ff-el-input--file span.ff_upload_btn,
.ff-skin--jobs .ff-el-input--file a.ff_upload_btn,
.ff-skin--jobs .ff-el-input--file button.ff_upload_btn{
  appearance: none !important;
  background: transparent !important;
  color: var(--upload-fg) !important;
  border: 2px solid var(--upload-border) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  padding: 12px 24px !important;
  border-radius: 3px !important;

  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 18px !important;

  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
}

/* Upload arrow via mask */
.ff-skin--jobs .ff_file_upload_holder .ff_upload_btn.ff-btn::after,
.ff-skin--jobs .ff-el-input--file .ff_upload_btn::after,
.ff-skin--jobs .ff-el-input--file .ff-file-upload::after,
.ff-skin--jobs .ff-el-input--file label.ff_upload_btn::after,
.ff-skin--jobs .ff-el-input--file span.ff_upload_btn::after,
.ff-skin--jobs .ff-el-input--file a.ff_upload_btn::after,
.ff-skin--jobs .ff-el-input--file button.ff_upload_btn::after{
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;

  background: #8aa59b !important;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat !important;
          mask: var(--arrow-mask) center / contain no-repeat !important;

  transform: rotate(-45deg);
  transition: transform .22s ease, background-color .22s ease;
}

@media (hover:hover){
  .ff-skin--jobs .ff_file_upload_holder .ff_upload_btn.ff-btn:hover::after,
  .ff-skin--jobs .ff-el-input--file .ff_upload_btn:hover::after,
  .ff-skin--jobs .ff-el-input--file .ff-file-upload:hover::after,
  .ff-skin--jobs .ff-el-input--file label.ff_upload_btn:hover::after,
  .ff-skin--jobs .ff-el-input--file span.ff_upload_btn:hover::after,
  .ff-skin--jobs .ff-el-input--file a.ff_upload_btn:hover::after,
  .ff-skin--jobs .ff-el-input--file button.ff_upload_btn:hover::after{
    transform: rotate(45deg);
    background: currentColor !important;
  }
}

/* Remove extra spacing under upload */
.ff-skin--jobs .ff-el-group.ff-el-input--file{
  margin-bottom: 0 !important;
}

/* ==========================================
   General form tweaks you had
========================================== */

.ansokan_container{
  background-color: var(--c-sand);
  padding: clamp(70px, 2.4vw, 80px) clamp(20px, 3vw, 70px);
  border-radius: 6px;
}

.ff-el-input--label{
  display: none !important;
}

.button-container-ansok .ff-t-cell.ff-t-column-1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.ff-el-group.upload{
  margin-bottom: 0px !important;
}

.m-ansokan__text{
  padding-bottom: 35px;
}

.frm-fluent-form .ff-t-container{
  display: flex;
  gap: 30px !important;
  width: 100%;
}

.ff-default .ff-el-form-control{
  border: 0px solid var(--fluentform-border-color) !important;
  border-radius: 6px !important;
  padding: 17px 15px !important;
}

.fluentform .ff-el-group{
  margin-bottom: 30px !important;
  height: fit-content;
}

input, textarea{
  font-family: var(--font-body) !important;
}

.ff-message-success{
  border: 1px solid #ced4da;
  margin-top: 10px;
  padding: 15px;
  position: relative;
  background-color: var(--c-bjork);
  color: var(--c-cream);
  height: 90px;
  justify-content: center;
  align-self: center;
  align-items: center;
  align-content: center;
  text-align: center;
  border-radius: 6px;
}

/* ==========================================
   Responsive layout: stack columns
========================================== */
@media (max-width: 800px){
  .button-container-ansok .ff-t-cell.ff-t-column-1{
    flex-direction: column;
  }

  .ff-el-group.upload{
    margin-bottom: 10px !important;
  }

  section#ansok .wrap{
    padding-left: 0;
    padding-right: 0;
  }

  .ansokan_container{
    padding: 40px clamp(20px, 3vw, 70px) !important;
  }

  .ff-skin--jobs .ff_submit_btn_wrapper{
    gap: 0px !important;
  }

  .ff-skin--jobs .ff_file_upload_holder .ff_upload_btn.ff-btn{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 500px){
  .frm-fluent-form .ff-t-container{
    gap: 0px !important;
    flex-direction: column;
  }
}

/* ✅ FIX: skapa inte viewport-höjd i submit-wrapper */
.frm-fluent-form .ff-t-cell .ff_submit_btn_wrapper_custom.ff-text-center{
  align-items: flex-start;
  height: auto !important;
  min-height: 0 !important;
}

/* =========================================================
   MOBILE (<=800px) – Submit: pilen bredvid text, stabil vid klick
   Lägg detta SIST i filen (single source of truth)
========================================================= */
@media (max-width: 800px){

  /* Göm loaders/spinners som kan flytta innehållet vid klick */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn-loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff_btn_loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-el-loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-el-spinner,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff_loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-loading{
    display: none !important;
  }

  /* Stäng av desktop-pil helt */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::before,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::before,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]::before{
    content: none !important;
  }

  /* Knapp-layout: alltid text + ikon inline (som upload-knappen) */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"],
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]{
    width: 100% !important;
    padding: 14px 22px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Om Fluent wrappar texten i spans: lås så de inte påverkar flödet */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn *,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"] *,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"] *{
    white-space: nowrap !important;
  }

  /* Pilen EFTER texten (inline) */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::after,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::after,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]::after{
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    vertical-align: middle !important;

    background: var(--c-green_300) !important;
    -webkit-mask: var(--arrow-mask) center / contain no-repeat !important;
            mask: var(--arrow-mask) center / contain no-repeat !important;

    transform: rotate(0deg) translateZ(0) !important;
    opacity: .95 !important;
    pointer-events: none !important;
    transition: transform .22s ease !important;
  }

  /* Hover (på enheter som har hover) – rotera utan att flytta */
  @media (hover:hover){
    .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn:hover::after,
    .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]:hover::after,
    .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]:hover::after{
      transform: rotate(var(--arrow-rot)) translateZ(0) !important;
    }
  }

  /* Active/pressed får aldrig påverka layout */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn:active,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]:active,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]:active{
    transform: none !important;
  }
}


/* =========================================================
   HOTFIX: Mobil – lås ordning även vid klick/loading
   (lägg SIST i fluent-jobs.css)
========================================================= */
@media (max-width: 800px){

  /* 1) Tvinga samma layout även när Fluent sätter loading/submitting */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"],
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"],
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-loading,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-submitting,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-loading,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-submitting,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"].ff-btn-loading,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"].ff-btn-submitting{
    display: inline-flex !important;
    flex-direction: row !important;  /* 🔒 inget row-reverse */
    direction: ltr !important;       /* 🔒 inget RTL-trick */
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    transform: none !important;      /* 🔒 ingen layout-jitter */
  }

  /* 2) Göm allt Fluent kan stoppa in (som annars kan påverka ordning) */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn-loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff_btn_loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-el-loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-el-spinner,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff_loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-loading,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn span.ff-btn-loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn span.ff-btn-text + span{
    display: none !important;
  }

  /* 3) Lås att “riktig text” alltid kommer före pilen */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn > *,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"] > *,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"] > *{
    order: 1 !important; /* text/innehåll */
  }

  /* 4) Pilen ska ALLTID ligga sist */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::after,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::after,
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]::after{
    order: 2 !important;
    margin-left: 12px !important;
    margin-right: 0 !important;
  }
}


/* =========================================================
   FIX: Submit-ikon som riktig nod (stabil vid klick/loading)
   Lägg SIST i fluent-jobs.css
========================================================= */

.ff-skin--jobs{
  --arrow-mask: url("/wp-content/themes/konovalenko/assets/icons/arrow-right.svg");
}

/* Desktop kan fortsätta som du har (absolute ::before) – vi rör inte det här */

/* MOBIL: använd riktig icon-nod istället för pseudo */
@media (max-width: 800px){

  /* Stäng av alla pseudo-pilar på mobil så inget kan “ta över” */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::before,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::after,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::before,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::after{
    content: none !important;
  }

  /* Lås layout på knappen i alla states */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"],
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-loading,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-submitting,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-loading,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-submitting{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Label */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn__label{
    white-space: nowrap !important;
    line-height: 1 !important;
  }

 .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn__icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    background: var(--c-green_300) !important;
    -webkit-mask: var(--arrow-mask) center / contain no-repeat !important;
    mask: var(--arrow-mask) center / contain no-repeat !important;
    transform: rotate(0deg);
    opacity: .95;
    pointer-events: none;
    transition: 0.3s all ease;
}

  /* Hover rotate (om hover finns) */
  @media (hover:hover){
    .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn:hover .ff-btn__icon,
    .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]:hover .ff-btn__icon{
      transform: rotate(45deg);
    }
  }

  /* Göm loaders/spinners som annars kan stöka ordningen */
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn-loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff_btn_loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-el-loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-el-spinner,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff_loader,
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-loading{
    display: none !important;
  }
}


/* =========================================================
   SUBMIT: En enda stabil lösning (desktop + mobile)
   - Ingen ::before/::after på submit
   - Riktig icon-nod (.ff-btn__icon)
   Lägg SIST i fluent-jobs.css
========================================================= */

/* Stäng av pseudo-pilar på submit helt */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::before,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn::after,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::before,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]::after,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]::before,
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]::after{
  content: none !important;
}

/* Submit-knappen: alltid label + icon inline */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"],
.ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  /* viktigt: ingen reserverad plats för “absolute arrow” längre */
  padding-right: 22px !important;
  padding-left: 22px !important;
}

/* Label */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn__label{
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Icon */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn__icon{
  width: var(--arrow-size, 18px) !important;
  height: var(--arrow-size, 18px) !important;
  flex: 0 0 auto !important;

  background: var(--c-green_300) !important;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat !important;
          mask: var(--arrow-mask) center / contain no-repeat !important;

  transform: rotate(0deg) translateZ(0);
  opacity: .95;
  pointer-events: none;
  transition: transform .22s ease;
}

/* Hover rotate */
@media (hover:hover){
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn:hover .ff-btn__icon,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"]:hover .ff-btn__icon{
    transform: rotate(var(--arrow-rot, 45deg)) translateZ(0);
  }
}

/* Loading/submitting: lås layout */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-loading,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn.ff-btn-submitting,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-loading,
.ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"].ff-btn-submitting{
  transform: none !important;
  opacity: 1 !important;
}

/* Göm loaders/spinners så de inte trycker runt innehållet */
.ff-skin--jobs .ff_submit_btn_wrapper .ff-btn-loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff_btn_loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-el-loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-el-spinner,
.ff-skin--jobs .ff_submit_btn_wrapper .ff_loader,
.ff-skin--jobs .ff_submit_btn_wrapper .ff-loading{
  display: none !important;
}

/* Mobil: full bredd (som du redan vill ha) */
@media (max-width: 800px){
  .ff-skin--jobs .ff_submit_btn_wrapper .ff-btn,
  .ff-skin--jobs .ff_submit_btn_wrapper button[type="submit"],
  .ff-skin--jobs .ff_submit_btn_wrapper input[type="submit"]{
    width: 100% !important;
    padding: 14px 22px !important;
  }
}






/* === Fluent Forms – NBI Checkbox === */

/* Dölj original men behåll klickyta */
.fluentform .ff-el-form-check input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 28px;
  height: 28px;
  margin: 0;
}

/* Label = klickyta */
.fluentform .ff-el-form-check label {
  position: relative;
  padding-left: 34px;
  line-height: 1.4;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

/* Omarkerad ruta */
.fluentform .ff-el-form-check label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border: 2px solid var(--c-gran);
  border-radius: 6px; /* lite mjukare NBI-känsla */
  background: transparent;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* Hover */
.fluentform .ff-el-form-check:hover label::before {
  opacity: 0.85;
}

/* Checked state */
.fluentform .ff-el-form-check input[type="checkbox"]:checked + span::before,
.fluentform .ff-el-form-check label:has(input[type="checkbox"]:checked)::before {
  background-color: var(--c-gran);
  border-color: var(--c-gran);
}

/* ✓ ikon */
.fluentform .ff-el-form-check input[type="checkbox"]:checked + span::after,
.fluentform .ff-el-form-check label:has(input[type="checkbox"]:checked)::after {
  content: "✓";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 16px;
  line-height: 1;
  color: var(--c-cream);
  pointer-events: none;
}

/* Focus (tillgänglighet) */
.fluentform .ff-el-form-check input[type="checkbox"]:focus-visible + span::before,
.fluentform .ff-el-form-check label:has(input[type="checkbox"]:focus-visible)::before {
  box-shadow: 0 0 0 3px rgba(31,58,47,0.25);
}