/* ===== FORM SECTIE ===== */
.forms-section {
    padding-top: 70px;
    padding-bottom: 50px;
    background-color: #eae9e9;
}

.forms {
  max-width: 890px;
  margin: 0 auto 0px;
  padding: 0px 20px;
}

/* ===== TABS ===== */
.forms-tabs {
  display: flex;
  gap: 12px;
}

.forms-tab {
   position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1;

  background-color: #acacac;
  color: #000;
  border: none;
  padding: 14px 24px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px 8px 0px 0px;
  transition: color 0.3s ease;
}

/* .forms-tab.is-active {
  background: #ff7a00;
  
} */

.forms-tab::before {
  content: '';
  position: absolute;
  inset: 0;                 /* vult hele tab */
  background-color: #ff7a00;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
  z-index: -1;
  border-radius: 8px 8px 0 0;
}

.forms-tab:hover::before {
  transform: scaleY(1);
}

.forms-tab:hover {
  color: #fff;
}

.forms-tab.is-active {
  background-color: #ff7a00;
  color: #fff;
}

.forms-tab.is-active::before {
  display: none;
}


/* ===== CONTENT ===== */
.forms-content-wrapper {
    background-color: white;
    border: solid 4px #ff7a00;
}

.forms-content {
  display: none;
  padding-top: 40px;
  padding-bottom: 40px;
}

.forms-content.is-active {
  display: block;
}

/* ===== NINJA FORMS BASIS ===== */
.nf-form-cont {
  max-width: 700px;
  margin: 0 auto;
}

.nf-field-element input,
.nf-field-element textarea,
.nf-field-element select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.nf-field-label label {
  font-weight: 600;
}

.nf-form-title {
    color: #ff7a00;
}

/* #nf-field-13 {
    background-color: #ff7a00;
} */

#nf-field-37,
#nf-field-18,
#nf-field-28 {
  appearance: none;
  border: none;
  cursor: pointer;

  padding: 16px 28px;
  border-radius: .6em;

  font-weight: 600;
  text-transform: uppercase;
  color: #fff;

  background-color: #FF752B;
  background-image: linear-gradient(#000, #000);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 0%;

  transition:
    background-size 0.6s cubic-bezier(.4,0,.2,1);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 6px 16px rgba(0,0,0,0.25);
}

#nf-field-37:hover,
#nf-field-18:hover,
#nf-field-28:hover {
  background-size: 100% 100%;
}

/* ==========================================================================
   FORMS SECTION - MOBILE (ONDER 992PX)
   ========================================================================== */

@media (max-width: 992px) {
    /* Zorg dat de tabs en het formulier even breed zijn */
    .forms {
        padding: 0 15px !important; /* Ruimte aan de zijkant van het scherm */
        max-width: 100% !important;
    }

    .forms-tabs {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .forms-tab {
        width: 100% !important;
        box-sizing: border-box !important; /* Zorgt dat padding de tab niet breder maakt */
        margin: 0 !important;
    }

    .forms-content-wrapper {
        width: 100% !important;
        box-sizing: border-box !important; /* Forceert dezelfde breedte als de tabs */
        margin: 0 !important;
    }
    
    .forms-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* 1. Tabs onder elkaar zetten */
    .forms-tabs {
        flex-direction: column !important; /* Stapelen! */
        gap: 0 !important; /* Geen witruimte tussen gestapelde tabs */
    }

    .forms-tab {
        width: 100% !important;
        border-radius: 0 !important; /* Ronde hoekjes weg bij stapelen */
        text-align: center !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        padding: 18px 10px !important; /* Iets groter tik-oppervlak */
    }

    .forms-tab:first-child {
        border-radius: 12px 12px 0 0 !important; /* Alleen bovenste tab rond */
    }

    /* 2. De content wrapper (het witte vlak) */
    .forms-content-wrapper {
        border-width: 4px !important;
        border-top: none !important; /* Sluit aan op de onderste tab */
        margin-top: -1px; /* Zorgt dat de tab en de box naadloos aansluiten */
    }

    .forms-content {
        padding: 30px 15px !important; /* Minder padding aan de zijkant */
    }

    /* 3. Ninja Forms velden optimaliseren */
    .nf-form-cont {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Maak inputvelden groot genoeg voor dikke vingers */
    .nf-field-element input, 
    .nf-field-element textarea, 
    .nf-field-element select {
        font-size: 16px !important; /* Voorkomt automatisch inzoomen op iPhone */
        padding: 14px !important;
    }

    /* De verzendknop over de hele breedte */
    #nf-field-37,
    #nf-field-18,
    #nf-field-28 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px !important;
        font-size: 18px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    /* Fix voor labels op mobiel */
    .nf-field-label {
        margin-bottom: 5px !important;
    }
}