/*
 * GTGF v21: premium herstyling van Inloggen en Join/Contact.
 *
 * Dit zijn de twee pagina's die direct om Mijn GTGF heen liggen: Inloggen is
 * de enige plek waar een uitgelogde bezoeker langskomt op weg naar het
 * dashboard, Join/Contact is waar een nieuwe sporter zijn eerste plan start.
 * Alleen bestaande, stabiele klassen worden herstijld, geen markup gewijzigd.
 *
 * Uitzetten: define( 'GTGF_PREMIUM_REDESIGN', false ); in wp-config.php.
 */

/* ==================================================================
   Pagina-hero (gtgf_page_hero(): topo-laag, eyebrow, titel, intro)
   ================================================================== */

body.gtp21-login .page-hero,
body.gtp21-join .page-hero {
	position: relative;
	overflow: hidden;
	background: var(--gtp-black) !important;
}
body.gtp21-login .page-hero .accent,
body.gtp21-join .page-hero .accent {
	color: var(--gtp-orange) !important;
}
body.gtp21-login .page-hero__intro,
body.gtp21-join .page-hero__intro {
	color: var(--gtp-white-muted) !important;
	max-width: 62ch;
}

/* ==================================================================
   Inloggen: statusmelding, handoffcontext, accountkaart, auth-grid
   ================================================================== */

body.gtp21-login .v1556-handoff-context {
	border-radius: var(--gtp-radius-l) !important;
	border: 1px solid var(--gtp-orange) !important;
	background: var(--gtp-orange-soft) !important;
}
body.gtp21-login .v1556-handoff-context span {
	color: var(--gtp-orange-deep) !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
}
body.gtp21-login .v1556-handoff-context ol li strong {
	background: var(--gtp-orange) !important;
	color: var(--gtp-white) !important;
	border-radius: 999px !important;
}

body.gtp21-login .login-account-card {
	border-radius: var(--gtp-radius-l) !important;
	border: 1px solid var(--gtp-line) !important;
	background: var(--gtp-white) !important;
	box-shadow: var(--gtp-shadow-card) !important;
}
body.gtp21-login .login-account-card .eyebrow {
	color: var(--gtp-orange) !important;
}
body.gtp21-login .login-logout-link {
	color: var(--gtp-text-muted) !important;
	transition: color .2s var(--gtp-ease);
}
body.gtp21-login .login-logout-link:hover {
	color: var(--gtp-black) !important;
}

body.gtp21-login .planner-auth-card {
	border-radius: var(--gtp-radius-l) !important;
	border: 1px solid var(--gtp-line) !important;
	background: var(--gtp-white) !important;
	box-shadow: var(--gtp-shadow-card) !important;
	transition: box-shadow .3s var(--gtp-ease), transform .3s var(--gtp-ease);
}
body.gtp21-login .planner-auth-card:hover {
	box-shadow: var(--gtp-shadow-card-hover) !important;
	transform: translateY(-3px);
}
body.gtp21-login .planner-auth-card h3 {
	font-size: clamp(24px, 2.6vw, 32px) !important;
}
body.gtp21-login .planner-auth-card--orange {
	background: linear-gradient(160deg, var(--gtp-white) 0%, var(--gtp-orange-soft) 130%) !important;
	border-color: var(--gtp-orange) !important;
}
body.gtp21-login .planner-auth-card .form-row label {
	color: var(--gtp-text-faint) !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
}
body.gtp21-login .planner-auth-card .form-row input {
	background: var(--gtp-paper) !important;
}
body.gtp21-login .login-help-link {
	color: var(--gtp-orange) !important;
	font-weight: 700 !important;
}
body.gtp21-login .login-register-note {
	color: var(--gtp-text-faint) !important;
}
body.gtp21-login .login-register-note a {
	color: var(--gtp-orange-deep) !important;
	font-weight: 700 !important;
}

body.gtp21-login .login-intro {
	border-radius: var(--gtp-radius-l) !important;
	background: var(--gtp-paper) !important;
	padding: 36px !important;
}
body.gtp21-login .v1551-account-proof span {
	border-radius: 999px !important;
	background: var(--gtp-white) !important;
	border: 1px solid var(--gtp-line) !important;
	box-shadow: var(--gtp-shadow-card) !important;
}
body.gtp21-login .v1551-account-proof strong {
	color: var(--gtp-orange-deep) !important;
}

/* ==================================================================
   Join/Contact: intro, actiekaart, interesseformulier
   ================================================================== */

body.gtp21-join .v147-join-account {
	background: var(--gtp-black) !important;
}
body.gtp21-join .v147-join-account p.eyebrow {
	color: var(--gtp-orange) !important;
}
body.gtp21-join .v147-join-account h2 span {
	color: var(--gtp-orange) !important;
}
body.gtp21-join .v147-join-account__benefits > div {
	border-radius: var(--gtp-radius-m) !important;
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
}
body.gtp21-join .v147-join-account__benefits strong {
	color: var(--gtp-orange) !important;
}

body.gtp21-join .whatsapp-card {
	border-radius: var(--gtp-radius-l) !important;
	border: 1px solid var(--gtp-line) !important;
	background: var(--gtp-white) !important;
	box-shadow: var(--gtp-shadow-card) !important;
	transition: box-shadow .3s var(--gtp-ease), transform .3s var(--gtp-ease);
}
body.gtp21-join .whatsapp-card:hover {
	box-shadow: var(--gtp-shadow-card-hover) !important;
	transform: translateY(-3px);
}

body.gtp21-join .join-intro h2,
body.gtp21-dash .v14-member-stage__head h2 span {
	color: var(--gtp-orange);
}