/* FoxChat — gedeelde stijl (licht en snel: één bestand, gecached over alle pagina's) */
:root{
  --bg: #000000;
  --bg-soft: #0d0d0d;
  --panel: #141414;
  --line: #2b2b2b;
  --text: #f5f5f5;
  --muted: #8a8a8a;
  --muted-2: #5f5f5f;
  --accent: #ff5a1f;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}

/* ---- Centered landing layout (index) ---- */
.center-page{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  padding-bottom:140px;
}
.center-page main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  max-width:420px;
}
.logo{width:260px; height:260px;}
.logo img{width:100%; height:100%; display:block;}
h1{margin:0; font-size:2.2rem; font-weight:800; letter-spacing:-0.02em;}
.tagline{margin:0; color:var(--muted); font-size:1.05rem; letter-spacing:0.02em;}
.tagline b{color:var(--text); font-weight:600;}

.enter-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 40px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:700; font-size:1.05rem;
  text-decoration:none; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.enter-btn:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(255,90,31,0.4);}

/* ---- Shared footer ---- */
footer.site-footer{
  position:fixed; bottom:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:18px 24px 22px; color:var(--muted); font-size:0.78rem;
  background:linear-gradient(180deg, transparent, var(--bg) 55%);
  text-align:center;
}
.footer-links{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.footer-links button{
  background:none; border:none; padding:0; color:var(--muted);
  font-size:0.78rem; text-decoration:underline; cursor:pointer;
}
.footer-links button:hover{color:var(--text);}
.disclaimer{max-width:380px; line-height:1.4;}

/* ---- Modal (privacy/disclaimer/ad) ---- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75);
  align-items:center; justify-content:center; padding:24px; z-index:100;
}
.modal-overlay.show{display:flex;}
.modal{
  background:#161616; border:1px solid #2a2a2a; border-radius:16px;
  max-width:480px; width:100%; max-height:80vh; overflow-y:auto;
  padding:32px; text-align:left;
}
.modal h2{margin:0 0 16px; font-size:1.3rem;}
.modal p, .modal li{color:var(--muted); font-size:0.9rem; line-height:1.6;}
.modal ul{padding-left:20px; margin:12px 0;}
.modal-close{
  display:block; margin:24px 0 0 auto; background:var(--accent); color:#fff;
  border:none; padding:10px 22px; border-radius:999px; font-weight:700; cursor:pointer;
}

/* ============================================================
   PROFILE / LOGIN MOCKUP — minimal monochrome, underline fields
   ============================================================ */
.app-page{
  min-height:100%;
  padding:48px 20px 72px;
  display:flex;
  justify-content:center;
}
.app-card{
  width:100%;
  max-width:440px;
}
.app-header{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.app-header img{border-radius:8px;}
.app-header h2{
  margin:0;
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:-0.01em;
  flex:1;
}
.app-header .reset-link{
  font-size:0.8rem;
  color:var(--muted-2);
  text-decoration:none;
  cursor:pointer;
  background:none;
  border:none;
  letter-spacing:0.02em;
  transition:color .15s ease;
}
.app-header .reset-link:hover{color:var(--text); text-decoration:underline;}
.id-badge{
  font-size:0.76rem;
  color:var(--muted-2);
  letter-spacing:0.06em;
  font-family:"SF Mono", Menlo, Consolas, monospace;
}

/* Sectielabel + scheidingslijn — geeft de lange profielpagina rustige hiërarchie */
.section-label{
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--accent);
  margin-bottom:16px;
  opacity:0.85;
}
.section-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:36px 0;
  opacity:0.7;
}

/* photo row */
.photo-row{
  display:flex;
  gap:16px;
  margin-bottom:20px;
}
.avatar-circle{
  width:68px; height:68px; border-radius:50%;
  background:#232323; border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background-size:cover; background-position:center;
}
.avatar-circle svg{width:30px; height:30px; color:#6b6b6b;}
.photo-tile{
  width:68px; height:68px; border-radius:14px;
  background:#181818; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:300; color:#7a7a7a; cursor:pointer;
  flex-shrink:0;
  background-size:cover; background-position:center;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
  position:relative;
}
.photo-tile:hover{background-color:#222; border-color:#4a4a4a; transform:translateY(-1px);}
.photo-tile.has-photo::after{
  content:"×";
  position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; border-radius:50%;
  background:#000; border:1px solid var(--line);
  font-size:0.85rem; line-height:18px; color:var(--text);
}
.photo-tile input[type=file]{display:none;}
.photo-tile .plus{pointer-events:none;}

/* underline fields */
.field{margin-bottom:32px;}
.field label{
  display:block; font-size:0.92rem; font-weight:600; margin-bottom:12px;
  letter-spacing:0.01em;
}
.field .hint{
  font-weight:400; color:var(--muted-2); font-size:0.76rem; margin-left:6px;
}
.field input[type=text], .field input[type=password], .field input[type=date], .field textarea{
  width:100%; background:none; border:none; border-bottom:1px solid var(--line);
  color:var(--text); font-size:1.02rem; font-family:inherit; padding:8px 0 12px;
  outline:none; resize:none;
  transition:border-color .2s ease;
}
.field input[type=text]::placeholder, .field textarea::placeholder{color:var(--muted-2);}
.field input[type=text]:focus, .field input[type=password]:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{min-height:90px;}
.char-count{text-align:right; font-size:0.7rem; color:var(--muted-2); margin-top:6px;}

/* choice rows (geslacht / seksuele voorkeur) */
.choice-row{display:flex; flex-wrap:wrap; gap:10px;}
.choice-pill{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line);
  background:none; color:var(--muted); font-size:0.86rem; cursor:pointer;
  transition:all .18s ease;
}
.choice-pill:hover{border-color:#555; color:var(--text);}
.choice-pill.selected{
  border-color:var(--accent); color:var(--text); background:rgba(255,90,31,0.12);
  box-shadow:0 0 0 1px rgba(255,90,31,0.15);
}

/* location */
.location-box{margin-bottom:28px;}
.location-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--line); color:var(--text);
  padding:10px 18px; border-radius:999px; font-size:0.88rem; cursor:pointer;
}
.location-btn:hover{border-color:#555;}
.location-result{
  margin-top:10px; font-size:0.85rem; color:var(--muted);
}
.location-result.set{color:var(--text);}
.map-fallback{
  margin-top:14px; display:none;
}
.map-fallback.show{display:block;}
.map-canvas{
  position:relative;
  width:100%; height:220px; border-radius:12px; overflow:hidden;
  background-color:#111;
  border:1px solid var(--line);
}
/* Standaard OSM-tegels zijn fel/kleurig; deze filter maakt er een donkere kaart
   van zonder een aparte (vaak betaalde) dark-tile-service nodig te hebben. */
.map-tiles-dark{
  filter:invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.6);
}
.fox-map-pin{
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); border:2px solid #fff;
  box-shadow:0 0 0 6px rgba(255,90,31,0.25);
}
.leaflet-control-zoom a{
  background:#161616 !important; color:var(--text) !important; border-color:var(--line) !important;
}
.leaflet-control-zoom a:hover{background:#222 !important;}
.map-hint{font-size:0.72rem; color:var(--muted-2); margin-top:8px;}

/* captcha placeholder */
.captcha-box{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:28px;
  background:#0a0a0a;
}
.captcha-box input[type=checkbox]{
  width:20px; height:20px; accent-color:var(--accent); cursor:pointer;
}
.captcha-box .captcha-text{flex:1;}
.captcha-box .captcha-label{font-size:0.92rem;}
.captcha-box .captcha-sub{font-size:0.68rem; color:var(--muted-2); margin-top:2px;}

/* submit button (outline style per mockup) */
.btn-outline{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:17px; border-radius:12px;
  background:none; border:1px solid var(--text); color:var(--text);
  font-size:1.05rem; font-weight:500; letter-spacing:0.01em; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .15s ease;
}
.btn-outline:hover{background:rgba(255,255,255,0.06); border-color:var(--accent);}
.btn-outline:active{transform:scale(0.99);}
.btn-outline:disabled{opacity:0.35; cursor:not-allowed;}
.btn-outline:disabled:hover{background:none; border-color:var(--text);}

.location-display{
  text-align:center; margin-top:16px; font-size:0.95rem; color:var(--muted);
}

/* ad slot */
.ad-slot{
  text-align:center; margin-top:40px;
}
.ad-slot a{
  font-size:0.9rem; color:var(--muted); text-decoration:underline; cursor:pointer;
}
.ad-slot a:hover{color:var(--text);}
.ad-banner{
  border:1px dashed var(--line); border-radius:10px;
  padding:14px; margin-top:14px;
  font-size:0.72rem; color:var(--muted-2);
  text-align:center;
}

/* login page specifics */
.tab-row{display:flex; gap:8px; margin-bottom:28px; border-bottom:1px solid var(--line);}
.tab-btn{
  flex:1; background:none; border:none; color:var(--muted);
  padding:12px 0; font-size:0.95rem; cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tab-btn.active{color:var(--text); border-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.id-display{
  text-align:center; padding:24px; border:1px solid var(--line); border-radius:12px;
  margin-bottom:20px;
}
.id-display .code{
  font-size:1.8rem; font-weight:700; letter-spacing:0.06em; color:var(--accent);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.id-display .copy-btn{
  margin-top:10px; background:none; border:none; color:var(--muted);
  font-size:0.78rem; text-decoration:underline; cursor:pointer;
}
.id-display .copy-btn:hover{color:var(--text);}
.small-note{font-size:0.78rem; color:var(--muted-2); text-align:center; margin-top:10px; line-height:1.5;}

.chat-summary{
  border:1px solid var(--line); border-radius:14px; padding:24px; text-align:center;
}
.chat-summary .avatar-circle{margin:0 auto 16px; width:80px; height:80px;}
.chat-summary .avatar-circle svg{width:40px; height:40px;}