/* WebPet Classic 2026 — gast-homepage aanvulling v1
   Laad NA webpet-classic-2026-v6-herstel.css.
   Alleen actief met <body class="webpet-classic-2026 webpet-gast-homepage">.
   Bestaande PHP, loginformulier, image-submit en menu blijven intact.
*/
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox {
  box-sizing: border-box;
  background: #fff !important;
  color: #12364c;
  border: 1px solid #8dbfd6;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(13,74,108,.16);
  overflow: visible;
  height: auto !important;
  min-height: 0;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .heading {
  display: block;
  box-sizing: border-box;
  padding: 7px 11px;
  background: #d3edf9 !important;
  color: #12364c !important;
  border-bottom: 1px solid #8dbfd6;
  border-radius: 11px 11px 0 0;
  text-shadow: none !important;
  font-weight: 700;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form {
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px 12px;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form p {
  margin: 0;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox label {
  color: #12364c;
  font-weight: 600;
  text-shadow: none;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginInput {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid #8dbfd6;
  border-radius: 5px;
  background: #fff;
  color: #12364c;
  padding: 5px 7px;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginInput:focus {
  border-color: #075c91;
  outline: 2px solid #b6e0f4;
  outline-offset: 1px;
}
/* Bestaande afbeeldingsknop blijft functioneel en zichtbaar. */
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginSubmit {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}
/* Welkom en registratiegedeelte: dezelfde visuele taal als de kaarten. */
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingLong,
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong {
  box-sizing: border-box;
  background: #d3edf9 !important;
  color: #12364c;
  border: 1px solid #8dbfd6;
  border-radius: 12px 12px 0 0;
  padding: 10px 16px;
  height: auto;
  min-height: 0;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingLong h1,
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong h1 {
  margin: 0;
  color: #103d59;
  text-shadow: none;
  line-height: 1.35;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtLong {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  background: #fff;
  border-left: 1px solid #8dbfd6;
  border-right: 1px solid #8dbfd6;
  padding: 16px 20px;
  line-height: 1.65;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtLong ul {
  margin: 8px 0 14px;
  padding-left: 23px;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtLong li {
  margin-bottom: 4px;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtLong a {
  color: #075c91;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtLong a:hover {
  color: #003e6a;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtFooterLong {
  box-sizing: border-box;
  border: 1px solid #8dbfd6;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
}
/* Mobiel: de oorspronkelijke v4 forceert een loginvak van 124px hoog.
   Laat het formulier in plaats daarvan volledig meegroeien. */
@media screen and (max-width: 991px) {
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox {
    width: min(100%, 340px);
    margin: 0 auto 14px;
    height: auto !important;
  }
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form {
    padding: 12px 14px;
  }
  body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingLong,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong {
    padding: 10px 12px;
  }
  body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtLong {
    padding: 12px 14px;
    overflow-wrap: break-word;
  }
  body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingLong h1,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong h1 {
    font-size: clamp(17px, 4.8vw, 23px);
  }
}

/* v2 — correctie inlogformulier en registratie-uitnodiging.
   Alleen de gastenhomepage, geen wijziging aan formulieractie of veldnamen. */
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px 76px;
  column-gap: 5px;
  row-gap: 5px;
  align-items: center;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox label,
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginInput,
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox input[type="checkbox"],
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginSubmit {
  float: none !important;
  position: static !important;
  margin: 0 !important;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox label[for="nickname"] {
  grid-column: 1 / -1;
  grid-row: 1;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox #nickname {
  grid-column: 1 / -1;
  grid-row: 2;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox label[for="wachtwoord"] {
  grid-column: 1 / -1;
  grid-row: 3;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox #wachtwoord {
  grid-column: 1 / -1;
  grid-row: 4;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox label[for="computer"] {
  grid-column: 1;
  grid-row: 5;
  white-space: nowrap;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox #computer {
  grid-column: 2;
  grid-row: 5;
  justify-self: center;
  width: 15px;
  height: 15px;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginSubmit {
  grid-column: 3;
  grid-row: 5;
  justify-self: end;
  display: block;
  width: auto;
  max-width: 76px;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginInput {
  display: block;
  width: 100% !important;
  min-width: 0;
  height: 30px;
}
body.webpet-classic-2026.webpet-gast-homepage #header #loginBox input[type="hidden"] {
  display: none;
}
/* Registratie-CTA: uitsluitend de link in het tweede tekstvak. */
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong + .contentTxtLong > a[href*="registreer.php"] {
  display: inline-block;
  padding: 9px 17px;
  margin: 8px 0 12px;
  border-radius: 8px;
  background: #df7100;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 #a95100;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong + .contentTxtLong > a[href*="registreer.php"]:hover,
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong + .contentTxtLong > a[href*="registreer.php"]:focus-visible {
  background: #b95c00;
  color: #fff !important;
}
/* Mobiel: formulier onder het logo, met voldoende ruimte voor alle velden. */
@media screen and (max-width: 991px) {
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox {
    clear: both;
    float: none !important;
    position: relative;
    inset: auto;
    width: min(100%, 340px) !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto 14px !important;
  }
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form p {
    grid-template-columns: minmax(0, 1fr) 20px 76px;
  }
}

/* v3: gerichte desktopcorrecties; alleen gastenhomepage. */
@media screen and (min-width: 992px) {
  /* Het inlogvak blijft boven de grasrand in de oorspronkelijke header. */
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox {
    top: 40px !important;
    bottom: auto !important;
    max-width: 250px;
  }
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .heading {
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.2;
  }
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form {
    padding: 7px 11px 8px;
  }
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form p {
    row-gap: 3px;
  }
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginInput {
    height: 27px;
  }
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox label {
    line-height: 1.2;
  }
}

/* Laat de bestaande illustratie en de hoofdkaart één geheel vormen. */
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtHeadingMiddleLong + .contentTxtLong {
  border-bottom: 1px solid #8dbfd6;
  border-radius: 0 0 12px 12px;
  padding-top: 12px;
  padding-bottom: 14px;
  min-height: 0;
}
body.webpet-classic-2026.webpet-gast-homepage #innerContent .contentTxtFooterLong {
  border: 0 !important;
  background: transparent !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* Verberg uitsluitend de oude onzichtbare SEO-link, niet de registratieknop. */
body.webpet-classic-2026.webpet-gast-homepage #innerContent .hiddenText {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
/* Op telefoons geen desktop-topoffset afdwingen. */
@media screen and (max-width: 991px) {
  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox {
    top: auto !important;
    bottom: auto !important;
  }
}

/* Geintegreerde bordercorrectie; geen extra stylesheet nodig. */
/* WebPet Classic 2026 — gastenhomepage: aansluitende kaartranden.
   Laad ALS LAATSTE, na gasten-v3.css.
   Uitsluitend de twee welkomstkaarten; geen wijziging aan header,
   grasrand, navigatie, ingelogde homepage of PHP.
*/
@media screen and (min-width: 992px) {
  /* In de originele main.css is .contentTxtLong smaller dan de kop.
     Gebruik voor kop én inhoud dezelfde buitenbreedte en border-box. */
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtHeadingLong,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtHeadingMiddleLong,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtLong {
    box-sizing: border-box !important;
    width: 920px !important;
    max-width: 100% !important;
  }
}

/* De eerste kaart krijgt ook een echte onderrand, net als de tweede.
   Zo ontstaan per sectie gesloten kaders zonder extra footer-rand. */
body.webpet-classic-2026.webpet-gast-homepage
  #innerContent > .contentTxtHeadingLong + .contentTxtLong {
  border-bottom: 1px solid #8dbfd6;
  border-radius: 0 0 12px 12px;
}

/* Op mobiel geen vaste desktopbreedte afdwingen. */
@media screen and (max-width: 991px) {
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtHeadingLong,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtHeadingMiddleLong,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtLong {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* v4 - mobiele gastenhomepage: login als een enkele complete kaart.
   Alleen gasten, alleen mobiel. Desktop-v3 en de grasrand blijven ongemoeid. */
@media screen and (max-width: 991px) {
  body.webpet-classic-2026.webpet-gast-homepage #header {
    display: flow-root;
    height: auto !important;
    overflow: visible !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox {
    position: relative !important;
    display: flow-root !important;
    clear: both;
    float: none !important;
    box-sizing: border-box !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 16px !important;
    padding: 0 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #8dbfd6 !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 14px rgba(13,74,108,.16);
    overflow: hidden !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .heading {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: #d3edf9 !important;
    color: #12364c !important;
    border-radius: 11px 11px 0 0 !important;
    border-bottom: 1px solid #8dbfd6;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form {
    position: static !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    background: #fff !important;
    overflow: visible !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox form p {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 22px 82px !important;
    gap: 7px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginInput {
    width: 100% !important;
    max-width: 100% !important;
    height: 36px !important;
    padding: 6px 9px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox label {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox #computer {
    align-self: center;
    justify-self: center;
  }

  body.webpet-classic-2026.webpet-gast-homepage #header #loginBox .loginSubmit {
    align-self: center;
    justify-self: end;
    max-width: 82px;
  }

  /* Kop en inhoud van beide kaarten gelijk uitlijnen, zonder vaste breedtes. */
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtHeadingLong,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtHeadingMiddleLong,
  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtLong {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage #innerContent > .contentTxtLong {
    margin: 0 !important;
    padding: 12px 14px 16px !important;
  }
}

/* WebPet Classic 2026 - mobiele inlogkaart v7 */
@media screen and (max-width: 767px) {

  body.webpet-classic-2026.webpet-gast-homepage
  #header #loginBox form {
    padding-bottom: 20px !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage
  #header #loginBox form p {
    row-gap: 9px !important;
    align-items: center !important;
  }

  body.webpet-classic-2026.webpet-gast-homepage
  #header #loginBox label[for="computer"],
  body.webpet-classic-2026.webpet-gast-homepage
  #header #loginBox #computer,
  body.webpet-classic-2026.webpet-gast-homepage
  #header #loginBox .loginSubmit {
    align-self: center !important;
  }
}