/* ══════════════════════════════════════════════════════════════════════
 *  AFFILIATE AREA — een dun laagje over SliceWP
 *
 *  WAT ER MIS WAS AAN DE VORIGE VERSIE, EN HET WAS ÉÉN REGEL
 *
 *  De schil zette dit op alles binnen .trh-root:
 *
 *      .trh-root * { margin: 0 !important; padding: 0 !important }
 *
 *  Dat klopt voor onze eigen paginamodules, waar wij elke maat zelf zetten.
 *  Hier staat een vreemde plugin binnen die schil, en die rekent op zijn
 *  eigen marges. Wat er sneuvelde, letterlijk uit hun stylesheet:
 *
 *      .slicewp-field-wrapper            margin-bottom: 25px
 *      .slicewp-button-view-qr-code      margin-top: 10px; margin-left: 7px
 *      .slicewp-date-picker-input svg    margin-right: 5px
 *      .slicewp-date-picker-input-dates  border-left, padding, margin-left: 8px
 *      .slicewp-status-pill              padding: 8px 9px
 *      .slicewp-card-inner               padding: 20px
 *
 *  Vandaar de twee knoppen die op elkaar stapelden en "Past 30 days" dat
 *  vastplakte aan "25 Jul 2026". Ik heb daarna dertig regels geschreven om te
 *  herstellen wat die ene regel kapotmaakte, en alles wat ik vergat bleef
 *  stuk. Dat is de verkeerde volgorde.
 *
 *  DUS: DE RESET GAAT ERUIT.
 *
 *  Wat blijft is het deel dat tegen Cornerstone beschermt — box-sizing en
 *  text-transform — want dat haalt niets weg, het zet alleen iets terug.
 *  rootshell.py vraagt precies die twee en niet meer; de marges stonden er
 *  uit gewoonte bij.
 *
 *  EN DE REGEL VOOR DE REST VAN DIT BESTAND
 *
 *  SliceWP doet de layout. Wij doen kleur, typografie en de drie controls die
 *  van ons zijn: de primaire knop, de tabbladen en de statuspillen. Staat er
 *  een width, height, display of grid in dit bestand, dan hoort daar een
 *  reden bij waarom hún versie niet volstond.
 * ══════════════════════════════════════════════════════════════════════ */

/* ══ SCHIL ════════════════════════════════════════════════════════════ */
.trh-root {
	position: relative !important;
	left: 50% !important; right: 50% !important;
	margin-left: -50vw !important; margin-right: -50vw !important;
	width: 100vw !important; max-width: 100vw !important;
	overflow-x: hidden !important;   /* terugval: Safari kent clip pas vanaf 16 */
	overflow-x: clip !important;
	overflow-y: visible !important;
	font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	-webkit-font-smoothing: antialiased !important;
	line-height: 1.5 !important;
	background: #0d1b2a !important;

	--c-navy: #0c1927;
	--c-green: #03c988;
	--c-green-d: #02a873;
	--c-off: #f8f9fa;
	--c-amber: #f0997b;

	--tra-page: #e4eaf1;
	--tra-card: #ffffff;
	--tra-bdr: #ccd4de;
	--tra-hair: #e6eaf0;
	--tra-ink: #0d1b2a;
	--tra-sub: #415a77;
	--tra-muted: #778da9;
	--tra-green-ink: #026644;
	--tra-r: 14px;
	--tra-rs: 8px;
}

/* Alleen wat Cornerstone terugzet. GEEN margin of padding — zie de kop. */
.trh-root *, .trh-root *::before, .trh-root *::after {
	box-sizing: border-box !important;
	text-transform: none !important;
}
.trh-root :focus-visible {
	outline: 2px solid var(--c-green) !important;
	outline-offset: 3px !important;
}
.trh-w { max-width: 1200px !important; margin: 0 auto !important; }

/* ══ HET ACCOUNT — LICHT ══════════════════════════════════════════════
   Licht omdat het tabellen en cijfers zijn. Op de checkout is gemeten dat
   een donkere samenvatting op 1,14:1 uitkwam; dit is dezelfde inhoud. */
.trh-root.traff-area--account {
	background: var(--tra-page) !important;
	color: var(--tra-ink) !important;
	padding: calc(var(--hdr-total-h, 56px) + 24px) 16px 64px !important;
}
@media (min-width: 769px) {
	.trh-root.traff-area--account {
		padding: calc(var(--hdr-total-h, 72px) + 24px) 32px 80px !important;
	}
}

#slicewp-affiliate-account { max-width: 1060px !important; margin: 0 auto !important; }

.traff-area--account p,
.traff-area--account label,
.traff-area--account td { color: var(--tra-sub) !important; }
.traff-area--account h1,
.traff-area--account h2,
.traff-area--account h3,
.traff-area--account .slicewp-section-heading,
.traff-area--account .slicewp-card-header { color: var(--tra-ink) !important; }

/* ── de tabbladen ────────────────────────────────────────────────────
   Hier wél layout, en dat is de uitzondering die de regel bevestigt:
   SliceWP zet ze als horizontale rij met een onderstreping. Met zeven
   tabbladen (straks acht) wordt dat een schuifbalk op een laptop, en het
   zijrek is precies waar menu_position="left" voor bestaat. */
.traff-area--account .slicewp-menu-left {
	display: grid !important;
	grid-template-columns: 208px minmax(0, 1fr) !important;
	gap: 26px !important;
	align-items: start !important;
}
@media (max-width: 860px) {
	.traff-area--account .slicewp-menu-left { grid-template-columns: minmax(0, 1fr) !important; }
}

.traff-area--account .slicewp-nav-tab-wrapper {
	flex-direction: column !important;
	gap: 2px !important;
	margin: 0 !important;
}
@media (max-width: 860px) {
	.traff-area--account .slicewp-nav-tab-wrapper {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin-bottom: 18px !important;
	}
}

.traff-area--account .slicewp-nav-tab a {
	display: flex !important;
	align-items: center !important;
	padding: 10px 12px !important;
	border: none !important;
	border-radius: var(--tra-rs) !important;
	color: var(--tra-sub) !important;
	font-size: var(--t-3, 13px) !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}
.traff-area--account .slicewp-nav-tab a:hover,
.traff-area--account .slicewp-nav-tab a:focus {
	border: none !important;
	background: rgba(255, 255, 255, .6) !important;
	color: var(--tra-ink) !important;
}
.traff-area--account .slicewp-nav-tab.slicewp-active a {
	border: none !important;
	background: var(--tra-card) !important;
	box-shadow: inset 0 0 0 1px var(--tra-bdr) !important;
	color: var(--tra-ink) !important;
	font-weight: 600 !important;
}
.traff-area--account .slicewp-nav-tab svg { color: var(--tra-muted) !important; }
.traff-area--account .slicewp-nav-tab.slicewp-active svg { color: var(--c-green) !important; }

/* ── kaarten: alleen de vorm ─────────────────────────────────────────
   Hun radius is 2px met een dubbele box-shadow als rand. Deze site heeft
   één kaartvorm en die staat op de checkout. De padding blijft van hen. */
.traff-area--account .slicewp-card {
	background: var(--tra-card) !important;
	border: 1px solid var(--tra-bdr) !important;
	border-radius: var(--tra-r) !important;
	box-shadow: none !important;
}
.traff-area--account .slicewp-card-header,
.traff-area--account .slicewp-card-footer {
	border-color: var(--tra-hair) !important;
	background: transparent !important;
}
.traff-area--account .slicewp-card-footer a {
	color: var(--tra-green-ink) !important;
	font-size: var(--t-3, 13px) !important;
	font-weight: 600 !important;
}

/* ── de cijfers ──────────────────────────────────────────────────────
   Alleen type en kleur. De grid blijft van hen: 2 kolommen onder 782px en
   4 daarboven, en met drie kaarten valt dat goed. */
.traff-area--account .slicewp-card-title {
	font-size: var(--t-2, 12px) !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	color: var(--tra-muted) !important;
}
.traff-area--account .slicewp-kpi-value {
	font-size: 26px !important;
	font-weight: 800 !important;
	letter-spacing: -.03em !important;
	color: var(--tra-ink) !important;
	font-variant-numeric: tabular-nums !important;
}
.traff-area--account .slicewp-kpi-direction {
	border-radius: 999px !important;
	background: rgba(65, 90, 119, .08) !important;
	color: var(--tra-sub) !important;
	font-size: var(--t-1, 11px) !important;
	font-weight: 700 !important;
}
.traff-area--account .slicewp-kpi-direction.slicewp-positive {
	background: rgba(3, 201, 136, .12) !important;
	color: var(--tra-green-ink) !important;
}
.traff-area--account .slicewp-kpi-direction.slicewp-negative {
	background: rgba(240, 153, 123, .16) !important;
	color: #a8461f !important;
}

/* ── tabellen ────────────────────────────────────────────────────────── */
.traff-area--account .slicewp-list-table th {
	border-color: var(--tra-hair) !important;
	font-size: var(--t-1, 11px) !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--tra-muted) !important;
}
.traff-area--account .slicewp-list-table td {
	border-color: var(--tra-hair) !important;
	font-size: var(--t-4, 14px) !important;
	color: var(--tra-sub) !important;
}

/* ── statuspillen ────────────────────────────────────────────────────
   Vijf statussen, drie betekenissen: het komt, het is er, het gaat niet
   door. Amber is de enige waarschuwkleur die dit huis heeft. Vorm en
   padding blijven van hen. */
.traff-area--account .slicewp-status-pill {
	border-radius: 999px !important;
	background: rgba(65, 90, 119, .10) !important;
	color: var(--tra-sub) !important;
	font-size: var(--t-1, 11px) !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
}
.traff-area--account .slicewp-status-pill.slicewp-status-paid,
.traff-area--account .slicewp-status-pill.slicewp-status-complete,
.traff-area--account .slicewp-status-pill.slicewp-status-active {
	background: rgba(3, 201, 136, .12) !important;
	color: var(--tra-green-ink) !important;
}
.traff-area--account .slicewp-status-pill.slicewp-status-rejected,
.traff-area--account .slicewp-status-pill.slicewp-status-failed {
	background: rgba(240, 153, 123, .16) !important;
	color: #a8461f !important;
}

/* ── velden: kleur en rand, verder niets ─────────────────────────────
   Breedte, hoogte en de padding voor het oogje staan al in hun eigen
   stylesheet (regel 124 tot 131). Die hoefden hier nooit te staan. */
.traff-area--account input[type="text"],
.traff-area--account input[type="email"],
.traff-area--account input[type="url"],
.traff-area--account input[type="password"],
.traff-area--account textarea {
	border: 1px solid var(--tra-bdr) !important;
	border-radius: var(--tra-rs) !important;
	background: var(--tra-card) !important;
	color: var(--tra-ink) !important;
	font-family: inherit !important;
	font-size: var(--t-4, 14px) !important;
	box-shadow: none !important;
}
.traff-area--account input:focus,
.traff-area--account textarea:focus,
.traff-area--account select:focus {
	border-color: var(--c-green) !important;
	box-shadow: 0 0 0 1px var(--c-green) !important;
	outline: none !important;
}
.traff-area--account .slicewp-field-wrapper label {
	font-size: var(--t-2, 12px) !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
	color: var(--tra-sub) !important;
}
.traff-area--account .slicewp-field-description {
	font-size: var(--t-2, 12px) !important;
	color: var(--tra-muted) !important;
}

/* ── knoppen ─────────────────────────────────────────────────────────
   ÉÉN groene per scherm. Dat is de CTA-regel, en de vorige versie brak
   hem: Copy, View QR Code en Generate stonden alle drie in het groen van
   "dit is de belangrijkste actie".

   Groen dus alleen op wat een formulier verstuurt. De rest wordt de
   neutrale variant uit CTA-SYSTEM.md: rand, geen vulling. */
.traff-area--account button[type="submit"],
.traff-area--account input[type="submit"],
.traff-area--register .slicewp-button-primary,
.traff-area--login .slicewp-button-primary,
.traff-area--reset .slicewp-button-primary {
	border: none !important;
	border-radius: var(--tra-rs) !important;
	background: var(--c-green) !important;
	color: #0c1927 !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}
.traff-area--account button[type="submit"]:hover,
.traff-area--register .slicewp-button-primary:hover,
.traff-area--login .slicewp-button-primary:hover {
	background: var(--c-green-d) !important;
}

/* Alles wat geen formulier verstuurt: kopiëren, een QR tonen, een link
   samenstellen. Handelingen, geen conversie. */
.traff-area--account .slicewp-button-primary:not([type="submit"]) {
	border: 1px solid var(--tra-bdr) !important;
	border-radius: var(--tra-rs) !important;
	background: var(--tra-card) !important;
	color: var(--tra-sub) !important;
	font-family: inherit !important;
	font-size: var(--t-3, 13px) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	cursor: pointer !important;
}
.traff-area--account .slicewp-button-primary:not([type="submit"]):hover {
	border-color: var(--c-green) !important;
	color: var(--tra-ink) !important;
}
.traff-area--account .slicewp-button-primary svg { color: var(--tra-muted) !important; }

/* ── de datumkiezer ──────────────────────────────────────────────────
   Alleen kleur. De binnenkant is hún layout, en dat is precies wat de
   vorige versie kapotmaakte. */
.traff-area--account .slicewp-date-picker-input {
	border-color: var(--tra-bdr) !important;
	border-radius: var(--tra-rs) !important;
	color: var(--tra-sub) !important;
	font-size: var(--t-3, 13px) !important;
}
.traff-area--account .slicewp-date-picker-input-dates { border-color: var(--tra-bdr) !important; }

/* ── links en meldingen ──────────────────────────────────────────────── */
.traff-area--account a { color: var(--tra-green-ink) !important; }
.traff-area--account .slicewp-user-notice {
	border-radius: var(--tra-rs) !important;
	background: rgba(240, 153, 123, .12) !important;
	border: 1px solid rgba(240, 153, 123, .32) !important;
	color: #a8461f !important;
	font-size: var(--t-3, 13px) !important;
}
.traff-area--account .slicewp-user-notice.slicewp-updated,
.traff-area--account .slicewp-user-notice.updated {
	background: rgba(3, 201, 136, .10) !important;
	border-color: rgba(3, 201, 136, .32) !important;
	color: var(--tra-green-ink) !important;
}
/* Ingelogd maar géén affiliate: dan is de melding het enige op de pagina. */
.traff-area--account > .slicewp-user-notice { max-width: 440px !important; margin: 0 auto !important; }

/* ══════════════════════════════════════════════════════════════════════
 *  REGISTRATIE, LOGIN EN WACHTWOORD — DONKER
 *
 *  Gelijk aan /login/: één deur voor de hele site. Deze drie sjablonen zijn
 *  niet over te nemen — SliceWP includeert ze hard vanuit zijn eigen map —
 *  dus dit is opmaak op hun markup, en er is geen weg omheen.
 * ══════════════════════════════════════════════════════════════════════ */

.trh-root.traff-area--register,
.trh-root.traff-area--login,
.trh-root.traff-area--reset {
	position: relative !important;
	overflow: hidden !important;
	background: var(--c-navy) !important;
	color: #fff !important;
	padding: calc(var(--hdr-total-h, 56px) + 44px) 16px 72px !important;
}
@media (min-width: 769px) {
	.trh-root.traff-area--register,
	.trh-root.traff-area--login,
	.trh-root.traff-area--reset {
		padding: calc(var(--hdr-total-h, 72px) + 48px) 32px 88px !important;
	}
}

/* De enige toegestane uitzondering op de groenregel: een gloed op 0.11.
   Waarden letterlijk uit modules/account/assets/login.css. Zonder die gloed
   is de naad onder de header een kleurfout in plaats van diepte. */
.trh-root.traff-area--register::before,
.trh-root.traff-area--login::before,
.trh-root.traff-area--reset::before {
	content: "" !important;
	position: absolute !important;
	top: -160px !important; left: 50% !important;
	transform: translateX(-50%) !important;
	width: 520px !important; height: 520px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(3, 201, 136, .11) 0%, transparent 68%) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

.traff-area__lead {
	position: relative !important;
	z-index: 2 !important;
	max-width: 440px !important;
	margin: 0 auto 26px !important;
	text-align: center !important;
}
.traff-area__lead h1 {
	margin: 0 0 8px !important;
	font-size: clamp(1.5rem, calc((100vw - 32px) * .06), 1.875rem) !important;
	font-weight: 800 !important;
	letter-spacing: -.03em !important;
	line-height: 1.1 !important;
	color: var(--c-off) !important;
}
.traff-area__lead p {
	margin: 0 !important;
	font-size: var(--t-6, 17px) !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, .62) !important;
}

.traff-area--register .slicewp-form,
.traff-area--login .slicewp-form,
.traff-area--reset .slicewp-form {
	position: relative !important;
	z-index: 2 !important;
	max-width: 440px !important;
	margin: 0 auto !important;
	padding: 26px !important;
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6) !important;
}

.traff-area--register label,
.traff-area--login label,
.traff-area--reset label {
	font-size: var(--t-2, 12px) !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, .62) !important;
}

.traff-area--register .slicewp-field-wrapper input,
.traff-area--login .slicewp-field-wrapper input,
.traff-area--reset .slicewp-field-wrapper input {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	border-radius: var(--tra-rs) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: var(--t-4, 14px) !important;
	box-shadow: none !important;
}
.traff-area--register .slicewp-field-wrapper input:focus,
.traff-area--login .slicewp-field-wrapper input:focus,
.traff-area--reset .slicewp-field-wrapper input:focus {
	border-color: var(--c-green) !important;
	box-shadow: 0 0 0 1px var(--c-green) !important;
	outline: none !important;
}

/* Volle breedte: op deze drie kaarten is dit de enige actie. */
.traff-area--register .slicewp-button-primary,
.traff-area--login .slicewp-button-primary,
.traff-area--reset .slicewp-button-primary {
	display: flex !important;
	width: 100% !important;
	justify-content: center !important;
	padding: 12px 22px !important;
}

.traff-area--register .slicewp-field-description,
.traff-area--login .slicewp-field-description,
.traff-area--reset .slicewp-field-description {
	font-size: var(--t-2, 12px) !important;
	color: rgba(255, 255, 255, .45) !important;
}
.traff-area--register .slicewp-field-error-message,
.traff-area--login .slicewp-field-error-message {
	font-size: var(--t-2, 12px) !important;
	color: var(--c-amber) !important;
}

.traff-area--register a,
.traff-area--login a,
.traff-area--reset a { color: var(--c-green) !important; }

/* ── het oogje ───────────────────────────────────────────────────────
   Gemeten stond het 11px onder het midden. Hun regel is goed — top:50%
   met margin-top:-11px — maar die 50% is van de wrapper, en de <input>
   daarin is inline, dus die wrapper is hoger dan het veld. Flex maakt de
   wrapper exact zo hoog als het veld; daarna klopt hun eigen regel weer.

   Gedempt in plaats van groen: groen betekent hier "dit is de actie", en
   dat is de knop eronder. */
.traff-area--register .slicewp-field-input-password,
.traff-area--login .slicewp-field-input-password,
.traff-area--reset .slicewp-field-input-password,
.traff-area--account .slicewp-field-input-password {
	display: flex !important;
	align-items: center !important;
}
.traff-area--register .slicewp-show-hide-password,
.traff-area--login .slicewp-show-hide-password,
.traff-area--reset .slicewp-show-hide-password {
	color: rgba(255, 255, 255, .45) !important;
}
.traff-area--account .slicewp-show-hide-password { color: var(--tra-muted) !important; }
.traff-area--register .slicewp-show-hide-password:hover,
.traff-area--login .slicewp-show-hide-password:hover,
.traff-area--account .slicewp-show-hide-password:hover { color: var(--c-green) !important; }

/* ── "Lost your password?" ───────────────────────────────────────────
   SliceWP zet hem ná de knop, en dat sjabloon kunnen we niet overnemen.
   Met een order valt hij ertussen — zelfde ingreep als .trco-goback op de
   checkout. Daar zoek je hem: vóór je op inloggen drukt, niet erna. */
.traff-area--login .slicewp-form { display: flex !important; flex-direction: column !important; }
.traff-area--login .slicewp-form .slicewp-button-primary { order: 10 !important; }
.traff-area--login .slicewp-lost-password {
	order: 5 !important;
	margin: 0 0 16px !important;
	text-align: right !important;
	font-size: var(--t-3, 13px) !important;
}
.traff-area--login .slicewp-lost-password a {
	color: rgba(255, 255, 255, .55) !important;
	text-decoration: none !important;
}
.traff-area--login .slicewp-lost-password a:hover {
	color: var(--c-green) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

/* ── de voorwaarden-regel ────────────────────────────────────────────
   Zelfde reparatie als op de checkout: het label stond op flex met een
   gap, en in een flexcontainer wordt elke losse tekstrun een eigen item —
   dus die gap viel ook middenin de zin. En de link had geen eigen grootte
   en erfde die van het thema. */
.traff-area--register .slicewp-field-wrapper-terms-and-conditions .slicewp-field-label-wrapper {
	display: block !important;
	position: relative !important;
	padding-left: 26px !important;
}
.traff-area--register .slicewp-field-wrapper-terms-and-conditions input[type="checkbox"] {
	position: absolute !important;
	left: 0 !important;
	top: 1px !important;   /* (13 x 1.5 = 19.5 regel, vinkje 17) / 2 = 1.25 */
}
.traff-area--register .slicewp-field-wrapper-terms-and-conditions label {
	display: inline !important;
	font-size: var(--t-3, 13px) !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, .62) !important;
}
.traff-area--register .slicewp-field-wrapper-terms-and-conditions label a {
	font-size: inherit !important;
	line-height: inherit !important;
	white-space: nowrap !important;
}

.traff-area--register .slicewp-user-notice,
.traff-area--login .slicewp-user-notice,
.traff-area--reset .slicewp-user-notice {
	border-radius: var(--tra-rs) !important;
	background: rgba(240, 153, 123, .10) !important;
	border: 1px solid rgba(240, 153, 123, .32) !important;
	color: #f6c3b1 !important;
	font-size: var(--t-3, 13px) !important;
}