/* ════════════════════════════════════════════════════════════════
   AUTH.CSS — gedeelde stijl voor login / registreren / dashboards
   Zelfde palet en fonts als "Kaap & Co..html"
   ════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0D1B2A;--navy-mid:#162436;--navy-light:#1E3148;
  --beige:#D6C3A5;--beige-light:#EAE0D0;--offwhite:#F8F5F2;
  --gold:#C8A96B;--gold-light:#DFC090;--gold-dark:#A8893B;
  --white:#FFFFFF;--text-dark:#0D1B2A;--text-mid:#4A5568;--text-light:#8B9AAB;
  --border:rgba(214,195,165,0.25);--border-strong:rgba(214,195,165,0.5);
  --transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
body{font-family:'DM Sans',sans-serif;background:var(--offwhite);color:var(--text-dark);-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{font-family:'Playfair Display',serif}
a{color:var(--gold-dark)}

/* ── Top-bar ── */
.app-nav{background:var(--navy);padding:1rem 4vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.app-nav .logo{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:600;color:var(--white);letter-spacing:0.05em;text-decoration:none}
.app-nav .logo span{color:var(--gold)}
.app-nav .nav-right{display:flex;align-items:center;gap:1.2rem}
.app-nav .who{display:inline-flex;align-items:center;color:rgba(255,255,255,0.7);font-size:0.82rem}
.app-nav .who b{color:var(--white);font-weight:600;margin-left:0.3rem}
.app-nav .nav-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;margin-right:0.5rem;border:1px solid rgba(255,255,255,0.35)}

/* ── Taalwissel (NL/EN) ── */
.lang-toggle{display:flex;background:rgba(255,255,255,0.1);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.lang-btn{padding:0.3rem 0.8rem;border:none;background:none;color:rgba(255,255,255,0.55);font-family:'DM Sans',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;cursor:pointer;transition:var(--transition)}
.lang-btn.active{background:var(--gold);color:var(--navy)}

/* ── Knoppen ── */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;background:var(--gold);color:var(--navy);padding:0.8rem 1.6rem;border-radius:2px;font-size:0.76rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;transition:var(--transition);width:100%}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-link{background:none;border:none;color:rgba(255,255,255,0.8);font-family:'DM Sans',sans-serif;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;padding:0.4rem 0.2rem}
.btn-link:hover{color:var(--gold)}

/* ── Auth-kaart (login/registreren) ── */
.auth-wrap{display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;min-height:calc(100vh - 64px)}
.auth-card{background:var(--white);width:100%;max-width:440px;padding:2.6rem 2.4rem;border:1px solid var(--border);border-radius:4px;box-shadow:0 20px 60px rgba(13,27,42,0.08)}
.auth-card .eyebrow{color:var(--gold-dark);font-size:0.7rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:0.6rem}
.auth-card h1{font-size:1.9rem;font-weight:500;margin-bottom:0.4rem}
.auth-card .lead{color:var(--text-mid);font-size:0.92rem;margin-bottom:1.8rem}

/* ── Formulier ── */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:0.74rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-mid);margin-bottom:0.4rem}
.field input{width:100%;padding:0.75rem 0.9rem;border:1px solid var(--border-strong);border-radius:2px;font-family:'DM Sans',sans-serif;font-size:0.95rem;background:var(--offwhite);transition:var(--transition)}
.field input:focus{outline:none;border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px rgba(200,169,107,0.15)}

/* ── Rolkeuze ── */
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-bottom:1.3rem}
.role-pick label{cursor:pointer;border:1.5px solid var(--border-strong);border-radius:3px;padding:1rem 0.9rem;text-align:center;transition:var(--transition);background:var(--offwhite)}
.role-pick input{position:absolute;opacity:0;pointer-events:none}
.role-pick label:hover{border-color:var(--gold)}
.role-pick input:checked + .role-inner{color:var(--navy)}
.role-pick label:has(input:checked){border-color:var(--gold);background:var(--beige-light);box-shadow:0 0 0 3px rgba(200,169,107,0.15)}
.role-inner .ic{font-size:1.5rem;display:block;margin-bottom:0.3rem}
.role-inner .t{display:block;font-weight:600;font-size:0.9rem}
.role-inner .d{display:block;font-size:0.72rem;color:var(--text-light);margin-top:0.2rem}

/* ── Meldingen ── */
.msg{padding:0.8rem 1rem;border-radius:2px;font-size:0.85rem;margin-bottom:1.2rem;display:none}
.msg.show{display:block}
.msg.error{background:#FCEDED;color:#9B2C2C;border:1px solid #F5C6C6}
.msg.ok{background:#EAF6EE;color:#22683C;border:1px solid #B8E0C6}

.auth-foot{text-align:center;margin-top:1.5rem;font-size:0.88rem;color:var(--text-mid)}
.auth-foot a{font-weight:600;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.back-site{display:inline-block;margin-top:1.2rem;font-size:0.8rem;color:var(--text-light);text-decoration:none}

/* ── Dashboard ── */
.dash{max-width:1040px;margin:0 auto;padding:2.5rem 4vw 5rem}
.dash h1{font-size:2.2rem;font-weight:500;margin-bottom:0.3rem}
.dash .sub{color:var(--text-mid);margin-bottom:2.2rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem}
.dash-card{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:1.6rem;box-shadow:0 10px 30px rgba(13,27,42,0.05)}
.dash-card h3{font-size:1.15rem;margin-bottom:0.4rem}
.dash-card p{color:var(--text-mid);font-size:0.88rem;line-height:1.6}
.soon{display:inline-block;margin-top:0.9rem;font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-dark);background:var(--beige-light);padding:0.25rem 0.6rem;border-radius:2px}

/* ── Dashboard-secties & favorieten ── */
.dash-section{margin-top:2.6rem}
.dash-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.dash-section h2{font-size:1.4rem;font-weight:500}
.count-pill{display:inline-block;min-width:22px;padding:0 7px;margin-left:0.4rem;border-radius:11px;background:var(--gold);color:var(--navy);font-family:'DM Sans',sans-serif;font-size:0.72rem;font-weight:700;line-height:22px;text-align:center;vertical-align:middle}
.btn-link.dark{color:var(--gold-dark);text-transform:none;letter-spacing:0;font-size:0.85rem}
.btn-link.dark:hover{color:var(--gold)}
.dash-note{color:var(--text-mid);font-size:0.9rem;padding:0.6rem 0}
.empty-state{background:var(--white);border:1px dashed var(--border-strong);border-radius:4px;padding:2.4rem 1.5rem;text-align:center;color:var(--text-mid)}

.fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem}
.fav-card{background:var(--white);border:1px solid var(--border);border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(13,27,42,0.05);display:flex;flex-direction:column}
.fav-card .fc-img{display:block;aspect-ratio:4/3;background:var(--beige-light);overflow:hidden}
.fav-card .fc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:var(--transition)}
.fav-card:hover .fc-img img{transform:scale(1.04)}
.fc-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-light);font-size:0.85rem}
.fc-body{padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.fc-loc{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:0.3rem}
.fc-title{font-size:1.05rem;font-weight:500;line-height:1.3;margin-bottom:0.4rem}
.fc-price{color:var(--text-mid);font-size:0.95rem;margin-bottom:0.9rem}
.fc-actions{display:flex;align-items:center;gap:0.8rem;margin-top:auto}
.fc-view{width:auto!important;padding:0.55rem 1.1rem;font-size:0.7rem}
.fc-remove{background:none;border:none;color:var(--text-light);font-family:'DM Sans',sans-serif;font-size:0.8rem;cursor:pointer;text-decoration:underline;transition:var(--transition)}
.fc-remove:hover{color:#9B2C2C}

/* ── Aanbieder: woningbeheer ── */
.mng-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;margin-top:1.4rem}
.mng-card{background:var(--white);border:1px solid var(--border);border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(13,27,42,0.05);display:flex;flex-direction:column}
.mng-img{aspect-ratio:16/10;background:var(--beige-light);overflow:hidden}
.mng-img img{width:100%;height:100%;object-fit:cover;display:block}
.mng-body{padding:1.1rem;display:flex;flex-direction:column;flex:1}
.mng-badges{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.6rem}
.badge{font-size:0.66rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0.22rem 0.55rem;border-radius:3px}
.badge.g-in_afwachting{background:#FDF1D8;color:#8A6D1A}
.badge.g-goedgekeurd{background:#EAF6EE;color:#22683C}
.badge.g-afgewezen{background:#FCEDED;color:#9B2C2C}
.badge.s-beschikbaar{background:var(--beige-light);color:var(--navy)}
.badge.s-onder_bod{background:#E7EEF6;color:#23527C}
.badge.s-verkocht{background:#ECECEC;color:#555}
.mng-title{font-size:1.1rem;font-weight:500;line-height:1.3;margin-bottom:0.3rem}
.mng-meta{color:var(--text-mid);font-size:0.85rem;margin-bottom:0.9rem}
.mng-actions{display:flex;align-items:center;gap:0.9rem;margin-top:auto}

/* ── Formulier-paneel ── */
.form-panel{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:1.8rem;margin-top:1.8rem;box-shadow:0 10px 30px rgba(13,27,42,0.05)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field textarea,.field select{width:100%;padding:0.75rem 0.9rem;border:1px solid var(--border-strong);border-radius:2px;font-family:'DM Sans',sans-serif;font-size:0.95rem;background:var(--offwhite);transition:var(--transition)}
.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px rgba(200,169,107,0.15)}
.field textarea{resize:vertical}
.field input[type=file]{font-family:'DM Sans',sans-serif;font-size:0.85rem;color:var(--text-mid)}
.field input[readonly]{background:var(--offwhite);color:var(--text-mid);cursor:default}
.field input[readonly]:focus{border-color:var(--border-strong);box-shadow:none}
.rate-note{display:block;margin-top:0.35rem;font-size:0.72rem;color:var(--text-mid);letter-spacing:0.02em;text-transform:none}

/* ── Foto-thumbnails in het formulier ── */
.field-hint{margin:0.35rem 0 0;font-size:0.78rem;color:var(--text-mid,#4A5568)}
.photo-preview{display:flex;flex-wrap:wrap;gap:0.7rem;margin-top:0.8rem}
.photo-preview .thumb{position:relative;width:92px;height:72px;border-radius:3px;overflow:hidden;border:1px solid var(--border-strong);cursor:grab;transition:box-shadow .15s,transform .15s,opacity .15s}
.photo-preview .thumb:active{cursor:grabbing}
.photo-preview .thumb.dragging{opacity:0.45}
.photo-preview .thumb.drop-target{box-shadow:0 0 0 2px var(--gold);transform:translateY(-2px)}
.photo-preview .thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.photo-preview .thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(13,27,42,0.78);color:#fff;font-size:0.7rem;line-height:20px;cursor:pointer;padding:0}
.photo-preview .thumb button:hover{background:#9B2C2C}
.photo-preview .thumb-new{position:absolute;bottom:0;left:0;right:0;background:var(--gold);color:var(--navy);font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;text-align:center;padding:1px 0}
.photo-preview .thumb-cover{position:absolute;top:3px;left:3px;background:var(--navy);color:#fff;font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border-radius:2px;padding:1px 4px}

/* ── Accountgegevens (account.html) ── */
.acc-section{max-width:620px}
.acc-section h2{font-size:1.25rem;font-weight:500;margin-bottom:1rem}
.acc-hint{font-size:0.78rem;color:var(--text-light);line-height:1.5;margin-top:0.2rem}
.acc-note{background:var(--beige-light);border:1px solid var(--border-strong);border-radius:3px;padding:0.7rem 0.9rem;font-size:0.8rem;color:var(--text-mid);line-height:1.5;margin-bottom:1.1rem}
.avatar-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.avatar{width:96px;height:96px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--beige-light);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--gold-dark)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-actions{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}
.acc-section label.btn-primary{cursor:pointer}

@media(max-width:560px){.form-row{grid-template-columns:1fr}}
@media(max-width:480px){.role-pick{grid-template-columns:1fr}.auth-card{padding:2rem 1.4rem}}