/* ==================================================================
   Nova Septem - Wachtwoord instellen
   ================================================================== */

.jh-ww{
  --groen: #476930;
  --diep:  #2E4620;
  --inkt:  #1B2416;
  --schaal:#F0E7D6;
  --room:  #FBF8F1;

  padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 96px);
  background: var(--room);
  color: var(--inkt);
}

.jh-ww__wrap{
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* ---- Formulier ---- */

.jh-ww__kaart{
  background: #fff;
  border-radius: 14px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 1px 2px rgba(16,24,16,.06);
}

.jh-ww__kaart h1{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--inkt);
  max-width: 16ch;
}

.jh-ww__lead{
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: #3B4636;
  max-width: 52ch;
}

.jh-ww__label{
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--inkt);
}

.jh-ww__hint{
  margin: 4px 0 12px;
  font-size: 14.5px;
  color: #6A7464;
}

.jh-ww__rij{
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.jh-ww__rij input{
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  border: 1px solid #dfe5db;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  color: var(--inkt);
}

.jh-ww__rij input::placeholder{ color: #9aa495; }

.jh-ww__rij input:focus{
  border-color: var(--groen);
  outline: 2px solid rgba(71,105,48,.18);
  outline-offset: 1px;
}

.jh-ww__form.is-fout .jh-ww__rij input{ border-color: #c0403f; }

.jh-ww__knop{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: var(--groen);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}

.jh-ww__knop:hover{ background: var(--diep); }
.jh-ww__knop:disabled{ opacity: .65; cursor: default; }

.jh-ww__knop:focus-visible,
.jh-ww__hulpknop:focus-visible,
.jh-ww__oud a:focus-visible{
  outline: 2px solid var(--groen);
  outline-offset: 3px;
}

.jh-ww__spinner{
  display: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: jh-ww-draai .7s linear infinite;
}

.jh-ww__form.is-bezig .jh-ww__spinner{ display: block; }

@keyframes jh-ww-draai{ to { transform: rotate(360deg); } }

/* ---- Melding ---- */

.jh-ww__melding{
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.jh-ww__melding:empty{ display: none; }

.jh-ww__melding.is-goed{
  padding: 14px 16px;
  border-radius: 10px;
  background: #eef4e9;
  color: #33502a;
}

.jh-ww__melding.is-fout{
  padding: 14px 16px;
  border-radius: 10px;
  background: #fbeceb;
  color: #8f2b2a;
}

/* ---- Hulp ---- */

.jh-ww__hulp{ margin-top: 32px; }

.jh-ww__hulp h2{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--inkt);
}

.jh-ww__hulp p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #4A5645;
  max-width: 48ch;
}

.jh-ww__hulpknoppen{ display: flex; flex-wrap: wrap; gap: 10px; }

.jh-ww__hulpknop{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 10px;
  background: #f0f3ed;
  color: var(--inkt) !important;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s ease;
}

.jh-ww__hulpknop svg{ color: var(--groen); flex: 0 0 17px; }
.jh-ww__hulpknop:hover{ background: #e6ebe0; }

/* ---- Zijkolom ---- */

.jh-ww__zij{
  background: var(--schaal);
  border-radius: 14px;
  padding: clamp(24px, 3.5vw, 36px);
}

.jh-ww__zij h2{
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--inkt);
}

.jh-ww__stappen{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  counter-reset: none;
}

.jh-ww__stappen li{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.jh-ww__nr{
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--groen);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
}

.jh-ww__stappen h3{
  margin: 3px 0 4px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--inkt);
}

.jh-ww__stappen p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #4A5645;
  max-width: 40ch;
}

.jh-ww__oud{
  margin: 0;
  padding-top: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A5645;
}

.jh-ww__oud a{
  color: var(--groen);
  font-weight: 600;
  text-decoration: underline;
}

/* ---- Smallere schermen ---- */

@media (max-width: 900px){
  .jh-ww__wrap{ display: block; }
  .jh-ww__zij{ margin-top: 20px; }
}

@media (max-width: 560px){
  .jh-ww__wrap{ width: min(1240px, 100% - 32px); }
  .jh-ww__rij{ display: block; }
  .jh-ww__knop{ width: 100%; margin-top: 10px; }
  .jh-ww__hulpknop{ flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .jh-ww__spinner{ animation-duration: 2s; }
}

/* ==================================================================
   Wachtwoord kiezen (na het klikken op de link in de mail)

   Dit is het moment waarop een klant voor het eerst binnenkomt in de
   nieuwe webshop. De opzet volgt die van de aanvraagpagina, zodat het
   voelt als één doorlopende stap.
   ================================================================== */

.jh-reset{
  --groen: #476930;
  --diep:  #2E4620;
  --inkt:  #1B2416;
  --schaal:#F0E7D6;

  color: var(--inkt);
}

.jh-reset__wrap{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.jh-reset__kaart{
  background: #fff;
  border-radius: 14px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 1px 2px rgba(16,24,16,.06);
}

.jh-reset__kaart h1{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--inkt);
}

.jh-reset__lead{
  margin: 0 0 28px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #3B4636;
  max-width: 48ch;
}

.jh-reset__veld{ margin-bottom: 22px; }

.jh-reset__veld label{
  display: block;
  margin-bottom: 8px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--inkt);
}

.jh-reset__invoer{ position: relative; }

.jh-reset__invoer input{
  width: 100%;
  height: 54px;
  padding: 0 52px 0 16px;
  border: 1px solid #dfe5db !important;
  border-radius: 10px !important;
  background: #fff;
  font-size: 16px;
  color: var(--inkt);
  box-sizing: border-box;
  box-shadow: none;
}

.jh-reset__invoer input:focus{
  border-color: var(--groen) !important;
  outline: 2px solid rgba(71,105,48,.18);
  outline-offset: 1px;
}

.jh-reset__knop:focus-visible{
  outline: 2px solid var(--groen);
  outline-offset: 3px;
}

/* ---- Sterktemeter ---- */

.jh-reset__meter{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 12px 0 8px;
}

.jh-reset__meter span{
  height: 5px;
  border-radius: 999px;
  background: #e6ebe0;
  transition: background .2s ease;
}

.jh-reset__meter.is-1 span:nth-child(1){ background: #c0403f; }
.jh-reset__meter.is-2 span:nth-child(-n+2){ background: #d68a2e; }
.jh-reset__meter.is-3 span:nth-child(-n+3){ background: #7fa84f; }
.jh-reset__meter.is-4 span{ background: var(--groen); }

.jh-reset__sterkte,
.jh-reset__gelijk{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6A7464;
}

.jh-reset__gelijk{ margin-top: 8px; }
.jh-reset__gelijk:empty{ display: none; }
.jh-reset__gelijk.is-goed{ color: #33502a; }
.jh-reset__gelijk.is-fout{ color: #8f2b2a; }

/* ---- Knop ---- */

.jh-reset__knop{
  width: 100%;
  height: 54px;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--groen) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .15s ease;
  margin-top: 6px;
}

.jh-reset__knop:hover{ background: var(--diep) !important; }

/* ---- Zijkolom ---- */

.jh-reset__zij{
  background: var(--schaal);
  border-radius: 14px;
  padding: clamp(24px, 3.5vw, 34px);
}

.jh-reset__zij h2{
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--inkt);
}

.jh-reset__punten{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jh-reset__punten li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.jh-reset__punten svg{ flex: 0 0 19px; margin-top: 3px; color: var(--groen); }

.jh-reset__punten h3{
  margin: 0 0 3px;
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--inkt);
}

.jh-reset__punten p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #4A5645;
  max-width: 38ch;
}

.jh-reset__hulp{
  margin: 0;
  padding-top: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A5645;
}

.jh-reset__hulp a{ color: var(--groen); font-weight: 600; }

/* ---- WooCommerce eigen toon-knop opvangen ----

   WooCommerce wikkelt elk wachtwoordveld zelf in een span.password-input
   met een eigen toon-knop (.show-password-input). Zonder deze regels valt
   die knop boven het veld en klopt de positionering niet. We laten de
   wrapper de volledige breedte innemen en zetten WooCommerce zijn eigen
   oogje netjes in het veld. Geen eigen tweede knop, dus geen dubbele
   oogjes. */

.jh-reset__invoer .password-input{
  position: relative;
  display: block;
  width: 100%;
}

.jh-reset__invoer .password-input input{
  width: 100%;
  padding-right: 52px;
}

.jh-reset__invoer .password-input .show-password-input,
.jh-reset__invoer .show-password-input{
  position: absolute;
  top: 50% !important;
  right: 16px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  cursor: pointer;
}


/* ---- De accountpagina eromheen ---- */

/* Op deze pagina staat geen accountnavigatie, dus die ruimte mag weg. */
.woocommerce-account.woocommerce-lost-password .woocommerce-MyAccount-navigation{ display: none; }

/* De accountpagina's zetten .woocommerce op een grid van 280px + content,
   bedoeld voor de navigatiekolom naast de inhoud. Op de wachtwoordpagina is
   er geen navigatie, dus die lege eerste kolom (de notices-wrapper) duwt de
   kaart naar rechts en maakt hem smaller. Hier zetten we .woocommerce terug
   naar een gewone blokindeling, ongeacht of iemand ingelogd is. De tweede
   selector grijpt op de aanwezigheid van .jh-reset, zodat het ook klopt als
   WooCommerce de body-class net anders zet. */
.woocommerce-account.woocommerce-lost-password .woocommerce,
.jh-account .woocommerce:has(.jh-reset){
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* De lege meldingenbalk neemt anders nog ruimte in beslag bovenaan. */
.woocommerce-account.woocommerce-lost-password .woocommerce > .woocommerce-notices-wrapper:empty,
.jh-account .woocommerce:has(.jh-reset) > .woocommerce-notices-wrapper:empty{
  display: none;
}

@media (max-width: 900px){
  .jh-reset__wrap{ display: block; }
  .jh-reset__zij{ margin-top: 20px; }
}