/* ==========================================================
   GewoonChatten (Arc) - LOGIN THEME (clean + mobile proof)
   FULL REWRITE (incl. "NU ACTIEF" marquee) - NO CONFLICTS
   - geen dubbele/tegenstrijdige regels
   - correct mobile rendering (geen desktop-zoom)
   - card + logo + tekst + buttons
   - vlag (language) altijd rechtsboven in card
   - actieve users blok strak, zonder floats/conflicts
========================================================== */

/* ---------- Viewport fallback ---------- */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
	zoom: 1.0;
}

/* ---------- Base / Reset-ish ---------- */
html,
body {
	height: 100%;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

#login_wrap {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

* {
	box-sizing: border-box;
}

/* ---------- Background ---------- */
#intro_top {
	width: 100%;
	min-height: 100vh;
	height: auto;
	position: relative;

	background: #292929 url('images/background.jpg') center/cover no-repeat;
	background-attachment: fixed;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 14px;
}

/* Overlay */
#intro_top:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .78));
	z-index: 0;
}

/* Zorg dat de Boom wrappers niet "boven" je card gaan zitten */
#intro_top>.btable,
#intro_top>.bcell_mid,
#intro_top .btable,
#intro_top .bcell_mid {
	position: static !important;
	z-index: auto !important;
}

/* ---------- Card ---------- */
#login_all {
	position: relative;
	width: min(720px, 96%);
	max-width: 96%;
	margin: 0 auto;

	border-radius: 22px;
	color: #fff;

	background: rgba(18, 18, 22, .72);
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 18px 70px rgba(0, 0, 0, .55);

	overflow: hidden;
	z-index: 1;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
	#login_all {
		background: rgba(18, 18, 22, .88);
	}
}

#login_all.pad30 {
	padding: 28px !important;
}

/* ---------- Language flag (top-right in card) ---------- */
#intro_lang {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;

	width: 32px !important;
	height: 32px !important;

	border-radius: 10px !important;
	background: rgba(0, 0, 0, .45) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	box-shadow: 0 8px 22px rgba(0, 0, 0, .45) !important;
	z-index: 50 !important;

	transition: background .12s ease, transform .12s ease;
}

@media (hover:hover) {
	#intro_lang:hover {
		background: rgba(0, 0, 0, .58) !important;
		transform: translateY(-1px);
	}
}

#intro_lang img.intro_lang {
	width: 20px !important;
	height: 20px !important;
	border-radius: 6px !important;
}

/* ---------- Logo ---------- */
#login_logo {
	display: block;
	height: 78px;
	width: auto;
	max-width: 85%;
	margin: 0 auto 10px auto;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
}

/* ---------- Text ---------- */
.login_text {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.login_text p {
	margin: 0;
}

.login_text .text_xlarge {
	letter-spacing: .2px;
}

.login_text .text_med {
	opacity: .90;
	line-height: 1.45;
	word-break: break-word;
}

/* ---------- Buttons layout ---------- */
.centered_element.vpad15 {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
}

/* Buttons (login + guest) */
#login_wrap .intro_login_btn,
#login_wrap .intro_guest_btn,
#login_wrap .intro_facebook_btn {
	width: min(420px, 100%);
	border-radius: 14px !important;
	padding: 12px 16px !important;

	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 14px 35px rgba(0, 0, 0, .35);

	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
	min-height: 44px;
}

@media (hover:hover) {

	#login_wrap .intro_login_btn:hover,
	#login_wrap .intro_guest_btn:hover,
	#login_wrap .intro_facebook_btn:hover {
		transform: translateY(-1px);
		filter: brightness(1.05);
		box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
	}
}

#login_wrap .intro_login_btn:active,
#login_wrap .intro_guest_btn:active,
#login_wrap .intro_facebook_btn:active {
	transform: translateY(0) scale(.995);
	filter: brightness(1);
}

#login_wrap .intro_login_btn {
	background: linear-gradient(135deg, rgba(255, 122, 24, .95), rgba(255, 49, 109, .95)) !important;
	border-color: rgba(255, 255, 255, .14) !important;
}

#login_wrap .intro_guest_btn {
	background: rgba(255, 255, 255, .08) !important;
}

/* ---------- Register block ---------- */
#login_wrap .tpad20 {
	margin-top: 10px;
	text-align: center;
}

#login_wrap .text_xsmall {
	opacity: .75;
}

#login_wrap .text_med.bold.bclick {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 8px 12px;
	border-radius: 12px;

	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);

	transition: background .12s ease, transform .12s ease;
	min-height: 44px;
	line-height: 1.2;
	cursor: pointer;
}

@media (hover:hover) {
	#login_wrap .text_med.bold.bclick:hover {
		background: rgba(255, 255, 255, .10);
		transform: translateY(-1px);
	}
}

/* ---------- SEO section (if used) ---------- */
.section {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.section_content {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.section_inside {
	margin: 0 auto;
}

@media screen and (max-width:1120px) {
	.section_inside {
		width: 96%;
	}
}

/* ==========================================================
   "NU ACTIEF" (Actieve users) - PERFECT / NO FLOATS
========================================================== */

#intro_active_wrap {
	max-width: 560px;
	/* iets ruimer zodat het mooier vult */
	width: 100%;
	margin: 14px auto 0;
	padding: 10px 12px 12px;
	border-radius: 16px;

	background: rgba(0, 0, 0, .28);
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
	overflow: hidden;
}

#intro_active_wrap .intro_active_title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	font-weight: 900;
	font-size: 12px;
	letter-spacing: .40px;
	text-transform: uppercase;

	color: rgba(255, 255, 255, .85);
	margin: 0 0 8px 0;
}

#intro_active_wrap .intro_active_title i {
	font-size: 10px;
	color: #2ee59d;
	text-shadow: 0 0 10px rgba(46, 229, 157, .45);
}

#intro_active_wrap .intro_active_marquee {
	width: 100%;
	border-radius: 14px;
	background: rgba(0, 0, 0, .16);
	border: 1px solid rgba(255, 255, 255, .08);
	padding: 10px 12px;
	overflow: hidden;
}

/* Marquee: strakke hoogte zodat er geen "lege kopruimte" ontstaat */
#intro_active_wrap marquee {
	height: 78px;
	white-space: nowrap;
	line-height: normal;
}

/* Override template floats/old css */
#intro_active_wrap #active_container {
	display: inline !important;
}

#intro_active_wrap .active_user {
	float: none !important;
	overflow: hidden;

	display: inline-flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;

	width: 82px !important;
	height: 74px !important;

	margin: 0 10px 0 0 !important;
	padding: 8px 8px 6px;

	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .10);

	vertical-align: middle;
}

/* Avatar (works for .active_avatar + generic img) */
#intro_active_wrap .active_avatar,
#intro_active_wrap img {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	object-fit: cover;

	border: 2px solid rgba(255, 255, 255, .80) !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
}

/* Naam (ongeacht tag) */
#intro_active_wrap .active_user span,
#intro_active_wrap .active_user div,
#intro_active_wrap .active_user a,
#intro_active_wrap .active_user p,
#intro_active_wrap .active_user small {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	font-size: 12px;
	font-weight: 800;
	color: rgba(255, 255, 255, .90);
	text-align: center;
	line-height: 1.1;

	margin: 0 !important;
}

/* ==========================================================
   Mobile
========================================================== */

@media screen and (max-width: 600px) {

	/* mobile performance */
	#intro_top {
		background-attachment: scroll;
		min-height: 100svh;
		padding: 18px 12px;
	}

	#login_all {
		width: 100%;
		max-width: 100%;
		border-radius: 18px;
	}

	#login_all.pad30 {
		padding: 14px !important;
	}

	#login_logo {
		height: auto;
		width: min(92vw, 360px);
		max-width: 100%;
		margin-bottom: 10px;
	}

	.login_text .text_xlarge {
		font-size: clamp(18px, 5.2vw, 24px) !important;
		line-height: 1.15 !important;
		margin-bottom: 8px !important;
	}

	.login_text .text_med {
		font-size: clamp(13px, 3.6vw, 16px) !important;
		line-height: 1.35 !important;
	}

	#login_wrap .intro_login_btn,
	#login_wrap .intro_guest_btn {
		width: 100%;
		padding: 11px 14px !important;
	}

	#intro_lang {
		top: 12px !important;
		right: 12px !important;
		width: 28px !important;
		height: 28px !important;
	}

	#intro_lang img.intro_lang {
		width: 18px !important;
		height: 18px !important;
	}

	#intro_active_wrap {
		max-width: calc(100% - 24px);
		margin-top: 12px;
	}

	#intro_active_wrap .intro_active_marquee {
		padding: 9px 10px;
	}

	#intro_active_wrap marquee {
		height: 72px;
	}

	#intro_active_wrap .active_user {
		width: 76px !important;
		height: 68px !important;
		margin-right: 9px !important;
		border-radius: 14px;
	}

	#intro_active_wrap .active_avatar,
	#intro_active_wrap img {
		width: 42px !important;
		height: 42px !important;
	}
}

@media screen and (max-width: 380px) {
	#login_all.pad30 {
		padding: 12px !important;
	}

	.login_text .text_med {
		font-size: clamp(12px, 3.9vw, 15px) !important;
	}
}

/* iOS zoom fix (als inputs aanwezig zijn) */
input,
select,
textarea {
	font-size: 16px;
}

/* Facebook group button */
#login_wrap .intro_facebook_btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	text-decoration:none !important;
	background: linear-gradient(135deg, #1877f2, #0b5fcc) !important;
	color: #fff !important;
}

#login_wrap .intro_facebook_btn .intro_fb_icon{
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display:block;
	box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* ==========================================================
   GewoonChatten - HOME/SEO secties onder de login card
   (los van Codychat defaults; classes beginnen met gc*)
========================================================== */

.gcHome{
	padding: 34px 14px 60px;
	color: rgba(255,255,255,.92);
}

.gcHome a{ color: inherit; }

.gcHero{
	max-width: 1100px;
	margin: 0 auto 26px;
}

.gcHero__inner{
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 18px;
	align-items: stretch;
}

.gcHero__copy{
	padding: 22px;
	border-radius: 22px;
	background: rgba(18,18,22,.60);
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 18px 60px rgba(0,0,0,.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.gcHero__copy h1{
	margin: 0 0 10px;
	font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.12;
	letter-spacing: .2px;
}

.gcHero__copy p{
	margin: 0 0 16px;
	opacity: .92;
	line-height: 1.55;
}

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

.gcBtn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none !important;
	padding: 10px 14px;
	border-radius: 14px;
	min-height: 44px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 14px 35px rgba(0,0,0,.30);
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.gcBtn--primary{
	background: linear-gradient(135deg, rgba(255, 122, 24, .95), rgba(255, 49, 109, .95));
	border-color: rgba(255,255,255,.14);
}

@media (hover:hover){
	.gcBtn:hover{
		transform: translateY(-1px);
		filter: brightness(1.05);
		box-shadow: 0 18px 45px rgba(0,0,0,.40);
	}
}

.gcHero__cards{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.gcCard{
	padding: 16px 16px 15px;
	border-radius: 20px;
	background: rgba(18,18,22,.55);
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 18px 60px rgba(0,0,0,.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.gcCard__icon{
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.12);
	margin-bottom: 10px;
	font-size: 18px;
}

.gcCard h3{ margin: 0 0 6px; font-size: 16px; }
.gcCard p{ margin: 0; opacity: .88; line-height: 1.45; }

.gcSection{
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 0;
}

.gcSection h2{
	margin: 0 0 14px;
	font-size: clamp(18px, 2.2vw, 26px);
	letter-spacing: .2px;
}

.gcGrid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.gcFeature{
	display: flex;
	gap: 12px;
	padding: 16px;
	border-radius: 20px;
	background: rgba(0,0,0,.22);
	border: 1px solid rgba(255,255,255,.10);
}

.gcFeature img{
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.gcFeature h3{ margin: 0 0 6px; font-size: 15px; }
.gcFeature p{ margin: 0; opacity: .88; line-height: 1.45; }

.gcSteps{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.gcSteps li{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px;
	border-radius: 20px;
	background: rgba(0,0,0,.22);
	border: 1px solid rgba(255,255,255,.10);
}

.gcSteps__n{
	width: 34px;
	height: 34px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.12);
}

.gcSteps__t{ opacity: .92; line-height: 1.45; }

.gcCallout{
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-radius: 22px;
	background: rgba(18,18,22,.55);
	border: 1px solid rgba(255,255,255,.10);
}

.gcCallout__text{ opacity: .90; line-height: 1.45; }

.gcTwo{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gcPanel{
	padding: 16px;
	border-radius: 20px;
	background: rgba(0,0,0,.22);
	border: 1px solid rgba(255,255,255,.10);
}

.gcPanel h3{ margin: 0 0 10px; font-size: 16px; }
.gcPanel ul{ margin: 0; padding-left: 18px; opacity: .90; line-height: 1.55; }
.gcPanel li{ margin: 6px 0; }
.gcPanel a{ text-decoration: underline; }

.gcFaq{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gcFaq__item{
	padding: 14px 16px;
	border-radius: 20px;
	background: rgba(0,0,0,.22);
	border: 1px solid rgba(255,255,255,.10);
}

.gcFaq__item summary{
	cursor: pointer;
	font-weight: 900;
	list-style: none;
}

.gcFaq__item summary::-webkit-details-marker{ display:none; }

.gcFaq__item p{
	margin: 10px 0 0;
	opacity: .90;
	line-height: 1.55;
}

.gcFooterCta{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 18px;
	border-radius: 22px;
	background: rgba(18,18,22,.60);
	border: 1px solid rgba(255,255,255,.10);
}

.gcFooterCta h2{ margin: 0 0 6px; }
.gcFooterCta p{ margin: 0; opacity: .90; line-height: 1.45; }

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

@media screen and (max-width: 980px){
	.gcHero__inner{ grid-template-columns: 1fr; }
	.gcHero__cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media screen and (max-width: 760px){
	.gcGrid{ grid-template-columns: 1fr; }
	.gcSteps{ grid-template-columns: 1fr; }
	.gcTwo{ grid-template-columns: 1fr; }
	.gcFaq{ grid-template-columns: 1fr; }
	.gcHero__cards{ grid-template-columns: 1fr; }
}

/* GewoonChatten - snelle footer links onder knoppen */
.intro_legal_links{
  margin: 14px auto 0 auto;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  opacity: .9;
}
.intro_legal_links a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.intro_legal_links a:hover{ text-decoration: underline; }
.intro_legal_links span{ margin: 0 6px; opacity: .65; }


/* ===== GewoonChatten background (zelfde als chat) ===== */
html, body { height: 100%; }
body{
  background: #0b0f18 url("images/chat-bg.png") center/cover fixed no-repeat !important;
}