/* =========================================================
   Oheyoo – Login/Registration visual refresh (CSS-only)
   VOLLEDIG BESTAND – kopieer/plak
   ========================================================= */

/* ---------- Basis (kleuren) ---------- */
:root{
  --oh-border:#dbeefe;
  --oh-input:#cfe1f5;
  --oh-teal1:#53c7c1;
  --oh-teal2:#2ea7a2;
  --oh-green1:#00e08f;
  --oh-green2:#00c972;
  --oh-green3:#00b35a;
  --oh-text:#1b2a3a;

  /* FINE-TUNE: extra verschuivingen (optioneel) */
  --tune-login-x: 0px;   /* extra translate links/rechts (negatief = links) */
  --tune-login-y: 0px;   /* extra translate omhoog/omlaag (negatief = omhoog) */
  --tune-arrow-x: 0px;   /* extra nudge pijl links/rechts */
  --tune-arrow-y: 0px;   /* extra nudge pijl omhoog/omlaag */
}

/* =========================================================
   Containers (login + register)
   ========================================================= */
:is(.bl_main_login .frm_login,
    .form_login .frm_login,
    #form_login .frm_login,
    .form_register,
    #form_join,
    #join_form){
  background:#fff;
  border:1px solid var(--oh-border);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(34,139,230,.12);
  padding:14px 16px 12px;
  position:relative;
  overflow:visible;
}

/* Extra fine-tune bovenop de inline positie uit index.html */
.bl_main_login.main_page_login_frm{
  position:relative !important;
  transform:translate(var(--tune-login-x), var(--tune-login-y)) !important;
  will-change:transform;
  z-index:5;
}

/* Pijl: nudge en ‘bolletjes’/pseudo’s uit */
.main_arrow{
  transform:translate(var(--tune-arrow-x), var(--tune-arrow-y)) !important;
  pointer-events:none !important;
}
.main_arrow > *,
.main_arrow::before,
.main_arrow::after{ display:none !important; content:none !important; }

/* =========================================================
   Labels en inhoudsruimte
   ========================================================= */
:is(.bl_main_login .frm_login label,
    .form_login label,
    .form_register label,
    #form_join label,
    #join_form label){ display:none; } /* placeholders i.p.v. labels */

:is(.bl_main_login .frm_login .cont,
    .form_login .cont,
    .form_register .cont,
    #form_join .cont,
    #join_form .cont){ padding:16px; }

/* =========================================================
   Inputs
   ========================================================= */
:is(.bl_main_login .frm_login .inp,
    .bl_main_login .frm_login input[type="text"],
    .bl_main_login .frm_login input[type="email"],
    .bl_main_login .frm_login input[type="password"],
    .form_login input[type="text"],
    .form_login input[type="email"],
    .form_login input[type="password"],
    .form_register input[type="text"],
    .form_register input[type="email"],
    .form_register input[type="password"],
    #form_join input[type="text"],
    #form_join input[type="email"],
    #form_join input[type="password"],
    #join_form input[type="text"],
    #join_form input[type="email"],
    #join_form input[type="password"]){
  width:100%;
  height:44px;
  box-sizing:border-box;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--oh-input);
  padding:0 14px;
  font-size:16px;
  color:var(--oh-text);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
:is(.bl_main_login .frm_login .inp:focus,
    .form_login input:focus,
    .form_register input:focus,
    #form_join input:focus,
    #join_form input:focus){
  border-color:#7ab6ff;
  box-shadow:0 0 0 3px rgba(122,182,255,.25);
}

/* =========================================================
   Info-rij (Wachtwoord vergeten? + Onthoud me)
   ========================================================= */
.bl_main_login .infa_login{
  background:transparent;
  padding:0 16px 14px;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important; /* link links / checkbox rechts */
  gap:12px !important;
  height:auto;
  font-size:14px;
}

/* Link links */
.bl_main_login .infa_login a{
  color:var(--oh-teal2);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  order:1;
}
.bl_main_login .infa_login a:hover{ text-decoration:underline; }

/* Checkbox helemaal rechts, zonder eigen groen vakje */
.bl_main_login .infa_login .custom_checkbox{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  order:2;
  margin-left:auto !important;
}
.bl_main_login .infa_login .custom_checkbox input{
  position:absolute; opacity:0; pointer-events:none;
}
.bl_main_login .infa_login .custom_checkbox label span{ display:none !important; }
.bl_main_login .infa_login .custom_checkbox label{
  cursor:pointer; user-select:none; color:#516173; white-space:nowrap;
}
.bl_main_login .infa_login .custom_checkbox input:checked + label{
  color:var(--oh-teal2);
}

/* Oude ‘balkjes’ direct na de info-rij weg */
.bl_main_login .infa_login + div,
.bl_main_login .infa_login + div + div{ display:none !important; }

/* =========================================================
   Knoppen (centraal en gelijk)
   ========================================================= */
:is(.bl_main_login .frm_login .foot,
    .form_login .foot,
    #form_join .foot,
    #join_form .foot){
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  background:transparent;
  height:auto;
  margin-top:12px;
  padding:0 16px 16px;
}

:is(.bl_main_login .frm_login .foot .btn,
    .form_login .foot .btn,
    #form_join .foot .btn,
    #join_form .foot .btn,
    .bl_main_login .frm_login .foot a.btn,
    .form_login .foot a.btn,
    #form_join .foot a.btn,
    #join_form .foot a.btn,
    .bl_main_login .frm_login .foot input.btn,
    .form_login .foot input.btn,
    #form_join .foot input.btn,
    #join_form .foot input.btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  min-width:140px;
  padding:10px 20px;
  box-sizing:border-box;
  font:700 13px/1 Tahoma,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#fff !important;
  text-decoration:none;
  border:0;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, filter .2s, background .35s;
  text-align:center;
}

/* Register (groen) */
#form_login_join.btn,
:is(.bl_main_login .frm_login .foot .btn.blue,
    .form_login .foot .btn.blue,
    .form_register .btn.blue,
    #form_join .btn.blue,
    #join_form .btn.blue){
  background:linear-gradient(90deg,var(--oh-green1),var(--oh-green2) 60%,var(--oh-green3));
}

/* Log in (teal) */
#form_login_submit.btn,
:is(.bl_main_login .frm_login .foot .btn-login,
    .bl_main_login .frm_login .foot .btn.orange,
    .form_login .foot .btn-login,
    .form_login .foot .btn.orange,
    #form_join .foot .btn-login,
    #form_join .foot .btn.orange,
    #join_form .foot .btn-login,
    #join_form .foot .btn.orange){
  background:linear-gradient(90deg,var(--oh-teal1),var(--oh-teal2));
}

:is(.bl_main_login .frm_login .foot .btn:hover,
    .form_login .foot .btn:hover,
    #form_join .foot .btn:hover,
    #join_form .foot .btn:hover){ filter:brightness(1.05); }

:is(.bl_main_login .frm_login .foot .btn:active,
    .form_login .foot .btn:active,
    #form_join .foot .btn:active,
    #join_form .foot .btn:active){
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,.2);
}

/* =========================================================
   Moderne schaduw onder login-kaart + legacy uit
   ========================================================= */
.bl_main_login .frm_login_shadow,
.frm_login_shadow,
#frm_login_shadow{
  display:none !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  width:0 !important; height:0 !important; border:0 !important; overflow:hidden !important;
}
.bl_main_login [class*="shadow"],
.bl_main_login [id*="shadow"],
.bl_main_login img[src*="shadow"]{
  display:none !important; visibility:hidden !important; opacity:0 !important;
  background:none !important; background-image:none !important; box-shadow:none !important;
  filter:none !important; pointer-events:none !important;
}

/* Eventuele pseudo-schaduwen van oude thema’s uit */
body.home :is(.frm_login,.form_login,#form_login,.login-bar,.loginbar,.header-login,.login-form,.authbar,.auth-bar)::after{
  content:none !important; background:none !important; box-shadow:none !important;
}

/* Nieuwe, nette ovale schaduw op de kaart zelf */
.bl_main_login .frm_login{ position:relative; }
.bl_main_login .frm_login::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-16px;
  width:68%;
  height:12px;
  border-radius:999px;
  box-shadow:0 22px 30px rgba(0,0,0,.28);
  pointer-events:none;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width:480px){
  :is(.bl_main_login .frm_login,
      .form_login .frm_login,
      .form_register,
      #form_join,
      #join_form){
    width:100%;
    max-width:360px;
    margin:0 auto;
    border-radius:16px;
  }
  .bl_main_login{ right:0; left:0; transform:none; display:flex; justify-content:center; }
  :is(.bl_main_login .frm_login .cont,
      .form_login .cont,
      .form_register .cont,
      #form_join .cont,
      #join_form .cont){ padding:14px; }
  :is(.bl_main_login .frm_login .foot,
      .form_login .foot,
      #form_join .foot,
      #join_form .foot){
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  :is(.bl_main_login .frm_login .foot .btn,
      .form_login .foot .btn,
      #form_join .foot .btn,
      #join_form .foot .btn){
    width:100%; min-width:0; height:48px; font-size:14px;
  }
  .main_arrow{ display:none !important; } /* pijl verbergen op mobiel */
}

/* =========================================================
   Kaart-foto’s (pins): geen wit frame, pijltje behouden
   ========================================================= */
.bl_map .map_photo{ background:none !important; border:none !important; padding:0 !important; box-shadow:none !important; }
.bl_map .map_photo .frame{
  background:transparent !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.bl_map .map_photo .frame a,
.bl_map .map_photo .frame a img{ display:block; }
.bl_map .map_photo .frame a img{
  border-radius:8px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
/* pijltje onderaan (sprite uit het thema) */
.bl_map .map_photo .photo{
  background-image:url('../images/map_photo_triangle.png') !important;
  background-repeat:no-repeat !important;
  background-position:50% 100% !important;
  padding-bottom:11px !important;
}

/* Utility */
html, body{ overflow:auto; }

/* === Oheyoo – Quick fine-tune (plak onderaan) ==================== */
/* Verander alléén de waardes hieronder tot het pixel-precies is */
:root{
  /* Login-kaart verschuiven (negatief = omhoog/links, positief = omlaag/rechts) */
  --tune-login-x:  710px;   /* meer naar rechts (+) / links (−)  */
  --tune-login-y:   -295px;   /* meer omlaag  (+) / omhoog (−)    */

  /* Pijl extra verschuiven t.o.v. huidige plek (richting LOG IN-knop) */
  --tune-arrow-x:  30px;   /* naar rechts (+) / links (−)      */
  --tune-arrow-y:   72px;   /* omlaag  (+) / omhoog (−)         */

  /* Afstand tussen kaart en titelblok onderaan */
  --tune-title-gap: 36px;   /* groter = meer ruimte             */
}

/* Pas de verschuivingen toe (blijft responsief) */
.bl_main_login.main_page_login_frm{
  position: relative !important;
  transform: translate(var(--tune-login-x), var(--tune-login-y)) !important;
  z-index: 3 !important;
  top: auto !important; bottom: auto !important; /* neutraliseer theme-waarden */
}

/* Pijl extra finetunen zonder het beeld te schalen/verdraaien */
.bl_main_login > .main_arrow{
  position: absolute !important;
  transform: translate(var(--tune-arrow-x), var(--tune-arrow-y)) !important;
  pointer-events: none !important; /* pijl nooit klikbaar */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}

/* Verwijder eventuele groene “bol/tooltip” artefacten in/naast de pijl */
.bl_main_login > .main_arrow > *,
.bl_main_login > .main_arrow::after{
  display: none !important;
  content: none !important;
}

/* Titelblok onder de kaart, met instelbare marge */
.bl_title_info_block{ margin-top: var(--tune-title-gap) !important; }

/* Zorg dat “Forgot password?” netjes blijft (en geen extra balken) */
.bl_main_login .infa_login{
  display:flex !important; align-items:center !important; gap:12px !important;
  flex-wrap:nowrap !important; padding:0 16px 10px !important;
}
.bl_main_login .infa_login + div,
.bl_main_login .infa_login + div + div{ display:none !important; } /* oude witte/glow balkjes uit */

/* ========= Oheyoo — Unify login style on ALL pages (profile, map, popups) ========= */
/* Kleuren (gelijk aan homepage) */
:root{
  --oh-border:#dbeefe;
  --oh-input:#cfe1f5;
  --oh-teal1:#53c7c1;
  --oh-teal2:#2ea7a2;
  --oh-green1:#00e08f;
  --oh-green2:#00c972;
  --oh-green3:#00b35a;
  --oh-text:#1b2a3a;
}

/* Container van elk loginblok overal */
:is(.frm_login, .form_login .frm_login, #form_login .frm_login){
  background:#fff !important;
  border:1px solid var(--oh-border) !important;
  border-radius:12px !important;
  box-shadow:0 4px 12px rgba(34,139,230,.12) !important;
  position:relative;
  overflow:visible;
}

/* Bruine/vreemde achtergronden uitschakelen */
:is(.frm_login .cont, .form_login .frm_login .cont, #form_login .frm_login .cont,
    .frm_login .foot, .form_login .frm_login .foot){
  background:transparent !important;
}

/* Inputs overal gelijk */
:is(.frm_login .inp,
    .frm_login input[type="text"],
    .frm_login input[type="email"],
    .frm_login input[type="password"]){
  width:100%; height:44px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--oh-input);
  padding:0 14px;
  font-size:16px; color:var(--oh-text);
  outline:0;
  transition:border-color .15s, box-shadow .15s;
}
:is(.frm_login .inp:focus,
    .frm_login input[type="text"]:focus,
    .frm_login input[type="email"]:focus,
    .frm_login input[type="password"]:focus){
  border-color:#7ab6ff !important;
  box-shadow:0 0 0 3px rgba(122,182,255,.25) !important;
}

/* Knoppen: links Register (groen), rechts Log in (teal) */
:is(.frm_login .foot){ display:flex; gap:12px; justify-content:center; padding:0 16px 16px !important; }

#form_login_join.btn,
:is(.frm_login .foot .btn.blue, .form_login .foot .btn.blue){
  background:linear-gradient(90deg,var(--oh-green1),var(--oh-green2) 60%,var(--oh-green3)) !important;
  color:#fff !important; border:0 !important; border-radius:999px !important;
  height:44px; min-width:140px; padding:10px 20px; font:700 13px/1 Tahoma,Arial,sans-serif; text-transform:uppercase;
  box-shadow:0 6px 16px rgba(0,0,0,.20); cursor:pointer;
}

#form_login_submit.btn,
:is(.frm_login .foot .btn-login, .frm_login .foot .btn.orange){
  background:linear-gradient(90deg,var(--oh-teal1),var(--oh-teal2)) !important;
  color:#fff !important; border:0 !important; border-radius:999px !important;
  height:44px; min-width:140px; padding:10px 20px; font:700 13px/1 Tahoma,Arial,sans-serif; text-transform:uppercase;
  box-shadow:0 6px 16px rgba(0,0,0,.20); cursor:pointer;
}
:is(.frm_login .foot .btn:hover, .frm_login .foot .btn-login:hover){ filter:brightness(1.05); }

/* “Forgot password?” linkkleur en spacing */
:is(.infa_login, .form_login .infa_login){ 
  background:transparent !important;
  display:flex; align-items:center; gap:12px; padding:0 16px 10px !important;
}
:is(.infa_login a, .form_login .infa_login a){
  color:var(--oh-teal2) !important; text-decoration:none; font-weight:600; white-space:nowrap;
}
:is(.infa_login a:hover, .form_login .infa_login a:hover){ text-decoration:underline; }

/* Verberg oude “witte/blauwe balkjes” onder/in login */
.frm_login_shadow,
.bl_main_login .frm_login_shadow,
.infa_login + div, .infa_login + div + div{
  display:none !important; background:transparent !important; box-shadow:none !important;
  width:0 !important; height:0 !important; overflow:hidden !important;
}

/* Nette ovale schaduw onder elk loginkaartje */
:is(.frm_login)::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-16px; width:68%; height:12px; border-radius:999px;
  box-shadow:0 22px 30px rgba(0,0,0,.28); pointer-events:none;
}

/* Title van het loginblok iets netter (valt niet overal voor, maar schaadt nooit) */
:is(.form_login h4, .frm_login h4, .login_title, .login_header){
  margin:12px 16px 0 !important; color:#344454 !important; font-weight:700;
}

/* Kille themabackgrounds die het veld “vullen” (zoals bruin) overrulen */
:is(.form_login, #form_login, .frm_login){ background-clip:padding-box !important; }
:is(.frm_login .cont){ background-clip:padding-box !important; }

/* ===== Fix: blauwe titelbalk boven login verbergen op profiel/kaart pagina's ===== */
:is(.form_login .frm_login > .head,
    .form_login .frm_login > .head_11,
    #form_login .frm_login > .head,
    #form_login .frm_login > .head_11,
    .frm_login > .head,
    .frm_login > .head_11){
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* iets extra ademruimte boven de velden als de head weg is */

/* === Schaduw onder login-kaartje volledig uitschakelen === */

/* 1) Zet onze (of thema) ovale pseudo-schaduw uit */
.bl_main_login .frm_login::before{
  content: none !important;
  display: none !important;
}

/* 2) Verberg eventuele legacy shadow-divs of -images */
.bl_main_login .frm_login_shadow,
.frm_login_shadow,
#frm_login_shadow,
.bl_main_login [class*="shadow"],
.bl_main_login [id*="shadow"],
.bl_main_login img[src*="shadow"]{
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  width: 0 !important; height: 0 !important; overflow: hidden !important;
}

/* 3) Sommige thema’s tekenen nog 1–2 balkjes direct ná de info-rij */
.bl_main_login .infa_login + div,
.bl_main_login .infa_login + div + div{
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 4) Geen drop-shadow op de pijl (alleen als je die ook wilt uitschakelen) */
.bl_main_login > .main_arrow{
  filter: none !important;
  box-shadow: none !important;
}

/* (Optioneel) ook geen schaduw op de knoppen
.bl_main_login .frm_login .foot .btn{
  box-shadow: none !important;
}
*/

:is(.frm_login .cont){ padding-top: 16px !important; }