html, body {
	margin: 0;
	height: 0;
	width: 100%;

}
body {
	background-color: #101826;
	font-family: sans-serif;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
.btn_nl {
    background : url("../assets/flags/nl.png");
    background-repeat: no-repeat;
    background-position: center;
    border : none;
    cursor: pointer;
    text-indent: -99999px;
/*    background-size: 200px auto;*/
	width: 50px;
	height: 25px;
    padding-top: 0px !important;
    border-radius: 2px;
    margin-right: 5px;


}
.btn_en {
    background : url("../assets/flags/uk.png");
    background-repeat: no-repeat;
    background-position: center;
    border : none;
    cursor: pointer;
    text-indent: -99999px;
	width: 50px;
	height: 25px;
    padding-top: 0px !important;
    border-radius: 2px;

}
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;
	height: 100vh;
	width: 100%;
	background-image: url('../assets/skater.png');
	background-attachment: fixed;
	padding-bottom: 2px;
}
.mainLeft {
    margin: 8px;
}
.leftContainer {
	margin: 40px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}
.leftHeader h1 {
	color: #fff;
	line-height: 5px;
	font-family: monospace;
	font-size: 2vw;
}
.leftHeader h2 {
	color: #4C4FED;
	font-size: 1vw;
	font-weight: 100;
}
.leftContent {
	padding-top: 50px;
	padding-bottom: 50px;
}
.leftContent h1 {
	color: #fff;
	font-size: 2vw;
}
.leftContent h4 {
	color: #fff;
	margin: 5px 0px;
}
.leftContent p {
	color: #777E8D;
	font-size: 0.9vw;
}
.competitionContainer {
	display: grid;
    grid-template-columns: 1fr 2fr;
    height: 100px;
}
.competitionContainer img {
	height: 7vw;
	width: 7vw;
	border-radius: 50%;
}
.competitionContainer p {
	color: #fff;
	line-height: 10px;
	font-size: 1vw;
}
.competitionContainer .competitionName {
	color: #777E8D;
}
.leftFooter {
}
.footerMenu {
	padding-top: 70px;
	color: #777E8D;
}
.footerMenu a {
	color: #777E8D;
	text-decoration: none;
	font-size: 1vw;
}
.footerMenu a:hover {
	color: #4C4FED;
}
.footerCopy p{
	font-size: 0.8vw;
	color: #777E8D;
}
/* Purple glass: the panel is lavender with two soft purple spots, and the blocks on it are frosted glass.
   A glass block uses these three: background, -webkit-backdrop-filter + backdrop-filter, and box-shadow. */
:root {
	--glass-background: rgba(255, 255, 255, 0.55);
	--glass-blur: blur(16px) saturate(140%);
	--glass-edge: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 1.5px 1.5px rgba(213, 213, 251, 0.9), 0 8px 24px rgba(16, 24, 38, 0.06);
}
.mainRight {
	background:
		radial-gradient(440px 340px at 88% 22%, rgba(101, 102, 237, 0.30), transparent 70%),
		radial-gradient(420px 360px at 52% 72%, rgba(132, 126, 193, 0.30), transparent 70%),
		linear-gradient(180deg, #F8F8FE, #EFEFFE);
	background-attachment: fixed; /* the colour stays behind the blocks while scrolling (iPhones scroll it along, which still works) */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin: 15px;
	border-radius: 15px;
}
.input-container {
    display: flex;
    flex-direction: column;
    width: 600px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}
/* Step 2: the details form on a glass card */
.details-card {
    box-sizing: border-box;
    padding: 24px 28px 28px;
    border-radius: 14px;
    background: var(--glass-background);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge);
}
@media (max-width: 980px) {
    .details-card {
        padding: 20px 16px 24px;
    }
}

.input-label {
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

.input-field {
    border: 0;
    box-shadow: 0 0 1.5px 1.5px #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

.input-field:hover, .input-field:focus {
    border-color: #6c63ff;
    box-shadow: 0 0 12px rgba(108, 99, 255, 0.4);
}
.custom-select-wrapper {
    position: relative;
    display: inline-block;
}
.custom-select {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background-color: white;
    color: #000;
	box-shadow: 0 0 1.5px 1.5px #ccc;
    border-radius: 8px;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
.custom-select:hover {
    border-color: #6c63ff;
    box-shadow: 0 0 12px rgba(108, 99, 255, 0.4);
}
/* Grey only while a placeholder ("Gender", "Nationality") is still showing; a chosen value is black.
   Before, every dropdown was grey, so a chosen value looked like nothing was selected. */
.custom-select:invalid {
    color: #bbb;
}
.custom-select option {
    color: #000;
}
.custom-select-wrapper::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6566ED;
}
.custom-file-wrapper {
    position: relative;
    display: inline-block;

}

.custom-file-input {
    position: relative;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: white;
    box-shadow: 0 0 1.5px 1.5px #ccc;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.custom-file-input:hover {
    border-color: #5F60DE;
}

.custom-file-input:focus {
    outline: none;
    ox-shadow: 0 0 12px rgba(108, 99, 255, 0.4);
}

.custom-file-input::before {
    content: 'Choose file';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #fff;
    background-color: #6566ED;
	box-shadow: 0 0 1px 1px #5455C6;
	padding:7px;
	border-radius: 8px;
}

.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::file-selector-button {
    visibility: hidden;
}


/* Info box: glass, with a white "i" tile (same white tile + light purple ring as "+ Add reserve") */
.notification {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	padding: 9px;
	border: 0;
	border-radius: 10px;
	background: var(--glass-background);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-edge);
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #333;
}
.notification p {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #333;
}
/* The "ℹ" character is hidden (it looks different on every device); the "i" is drawn instead */
.notification .notiIcon {
	flex: none;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='1.7' fill='%236566ED'/%3E%3Cpath d='M12 11v7.5' stroke='%236566ED' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 17px no-repeat;
	box-shadow: inset 0 0 0 1.5px #D5D5FB;
	font-size: 0;
}
/* Step 2: "Did you mean ouder@gmail.com?" under an email address with a typo (lavender, like the info box) */
.email-hint {
	box-sizing: border-box;
	margin: 8px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background-color: #EFEFFE;
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: #333;
	overflow-wrap: anywhere;
}
.email-hint-fix {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: bold;
	color: #6566ED;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.email-hint-fix:hover {
	color: #5455C6;
}
.email-hint-fix:focus-visible {
	outline: 2px solid #6566ED;
	outline-offset: 2px;
	border-radius: 2px;
}
.progresBar {
	display: inline-block;
	margin: 10px;
}
.bar {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #E6E6E9;
	margin: 8px;
	border-radius: 25px;
	box-shadow: 0 0 1px 1px #D9D9D9;
}
.currentBar {
	background-color: #6566ED;
	width: 40px;
	box-shadow: 0 0 1px 1px #5455C6;
}

/* Clickable step bar (progressbar.php): done steps are light purple links, hovering a step grows it
   into a pill with its name, and the current pill shows its name for a moment when the page opens.
   The rules above stay for pages that still have the old plain dots. */
.progresBar.is-interactive {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	height: 28px;
	margin: 10px 14px;
	font-family: Arial, sans-serif;
}
.progresBar.is-interactive .bar {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: auto;
	min-width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background-color: #E6E6E9;
	box-shadow: 0 0 1px 1px #D9D9D9;
	color: transparent;
	text-decoration: none;
	outline: none;
	/* Closing: one smooth curve for size and colour */
	transition: height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), padding 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		background-color 0.3s ease, box-shadow 0.3s ease, color 0.2s ease, transform 0.15s ease;
}
/* A bigger invisible area to hover / tap than the 10px dot itself */
.progresBar.is-interactive .bar::after {
	content: "";
	position: absolute;
	top: -9px;
	right: -4px;
	bottom: -9px;
	left: -4px;
}
.progresBar.is-interactive .bar.is-done {
	background-color: #B9BAF6;
	box-shadow: 0 0 1px 1px #A3A4F2;
}
.progresBar.is-interactive .bar.currentBar {
	min-width: 40px;
	background-color: #6566ED;
	box-shadow: 0 0 1px 1px #5455C6;
}
.progresBar.is-interactive span.bar {
	cursor: default;
}
/* The name opens to exactly its own width: a one-column grid going from 0fr to 1fr
   (a fixed max-width made it race to full size and then stand still) */
.progresBar.is-interactive .bar-label {
	display: grid;
	grid-template-columns: 0fr;
	opacity: 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 26px;
	white-space: nowrap;
	transition: grid-template-columns 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.15s ease;
}
.progresBar.is-interactive .bar-label > span {
	min-width: 0;
	overflow: hidden;
}
/* Hover or keyboard focus: the dot grows into a pill with its name. It waits a moment first,
   so moving the mouse across the bar doesn't open every step on the way */
.progresBar.is-interactive .bar:hover,
.progresBar.is-interactive .bar:focus-visible {
	height: 26px;
	padding: 0 12px;
	transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s, padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s,
		background-color 0.3s ease 0.12s, box-shadow 0.3s ease 0.12s, color 0.3s ease 0.2s, transform 0.15s ease;
}
.progresBar.is-interactive .bar:hover .bar-label,
.progresBar.is-interactive .bar:focus-visible .bar-label {
	grid-template-columns: 1fr;
	opacity: 1;
	transition: grid-template-columns 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s, opacity 0.3s ease 0.22s;
}
.progresBar.is-interactive .bar.is-done:hover,
.progresBar.is-interactive .bar.is-done:focus-visible {
	background-color: #EFEFFE;
	box-shadow: 0 0 0 1.5px #D5D5FB; /* an outside ring like the dot's, so it fades instead of jumping */
	color: #6566ED;
}
.progresBar.is-interactive a.bar:active {
	transform: scale(0.96);
}
.progresBar.is-interactive .bar.currentBar:hover,
.progresBar.is-interactive .bar.currentBar:focus-visible {
	color: #fff;
}
.progresBar.is-interactive .bar.is-todo:hover,
.progresBar.is-interactive .bar.is-todo:focus-visible {
	background-color: #f2f2f6;
	box-shadow: 0 0 0 1.5px #E6E6E9;
	color: #9AA0AE;
}
.progresBar.is-interactive .bar:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6566ED;
}
/* When the page opens, the current pill shows its name for a moment, then folds back (calmly: 0.7s open,
   about 2s to read, 0.9s to close) */
.progresBar.is-interactive .bar.currentBar {
	animation: progress-intro-bar 4.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards;
}
.progresBar.is-interactive .bar.currentBar .bar-label {
	animation: progress-intro-label 4.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards;
}
@keyframes progress-intro-bar {
	0% { height: 10px; padding: 0; min-width: 40px; color: #fff; } /* starts as the normal pill, no dot first */
	16% { height: 26px; padding: 0 12px; min-width: 40px; color: #fff; }
	/* folding back: a gentle in-and-out curve instead of a quick start */
	76% { height: 26px; padding: 0 12px; min-width: 40px; color: #fff; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
	100% { height: 10px; padding: 0; min-width: 40px; color: #fff; }
}
@keyframes progress-intro-label {
	0% { grid-template-columns: 0fr; opacity: 0; }
	6% { opacity: 0; }
	16% { grid-template-columns: 1fr; opacity: 1; }
	72% { opacity: 1; }
	76% { grid-template-columns: 1fr; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
	86% { opacity: 0; }
	100% { grid-template-columns: 0fr; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.progresBar.is-interactive .bar,
	.progresBar.is-interactive .bar-label {
		animation: none !important;
		transition: none !important;
	}
}
.buttonContainer {
	margin: 20px auto;
	width: 600px;
}
.backButton {
    border: 0;
    box-shadow: 0 0 1px 1px #ccc;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    margin-right: 10px;
}
.backButton:hover {
	background-color: #f2f2f2;
	cursor: pointer;
}
.nextButton {
    border: 0;
    box-shadow: 0 0 1.5px 1.5px #5455C6;
    background-color: #6566ED;
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}
.nextButton:hover {
	background-color: #5F60DE;
	cursor: pointer;
}
.toggle-btn {
  background-color: #6566ED;
  box-shadow: 0 0 1.5px 1.5px #5455C6;
  color: #fff;
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.3s ease;
}

.toggle-btn:hover {
  background-color: #5F60DE;
}

.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 24px;
}

.arrow.rotate-up {
  transform: rotate(180deg); /* Rotate arrow to point up */
}

@media (max-width: 980px) {
	.container {
		display: block;
		grid-gap: 20px;
		width: 100%;
		background-attachment: fixed;
	}
	.leftContainer {
		display: inline-block;
		height: auto;
		margin: 10px;
	}
	.mainLeft {
		margin: 2%;
		width: 96%;
	}
	.mainRight {
		display: inline-block;
		margin: 2%;
		width: 96%;
	}
	.input-container {
		width: 90%;
	}
	.leftHeader h1 {
		font-size: 2em;
	}
	.leftHeader h2 {
		font-size: 1em;
	}
	.leftContent h1 {
		font-size: 1.5em;
	}
	.leftContent p {
		font-size: 1em;
	}
	.competitionContainer img {
		height: 5em;
		width: 5em;
	}
	.competitionContainer p {
		font-size: 1em;
		line-height: 1.5em;
	}
	.footerMenu a {
		font-size: 1em;
	}
	.footerCopy p{
		font-size: 1em;
	}
/*	.input-field {
		width: 100%;
	}*/
	.buttonContainer {
		width: 100%;
		padding-left: 0;
	}
	.leftContent {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.footerMenu {
		padding-top: 10px;
	}
}

/* ==========================================================================
   Sidebar (header.php): spacing, logo, language switcher. CSS only, no HTML changes.
   Sizes grow with the screen but within limits; the old 2vw / 0.9vw / 7vw sizes
   became huge on big screens and tiny on small ones.
   ========================================================================== */

.leftContainer {
    max-width: 560px;
    margin: 40px clamp(24px, 3vw, 56px);
}
.leftHeader h1 {
    margin: 0;
    line-height: 1.05;
    font-size: clamp(24px, 2.1vw, 40px);
}
.leftHeader h2 {
    margin: 10px 0 0;
    font-size: clamp(14px, 1vw, 18px);
    font-weight: normal;
}
.leftContent {
    padding: 48px 0 32px;
}
.leftContent h1 {
    margin: 0 0 14px;
    font-size: clamp(26px, 2vw, 38px);
}
.leftContent p {
    max-width: 62ch;
    margin: 0;
    line-height: 1.6;
    font-size: clamp(14px, 0.85vw, 16px);
    color: #9AA1B2;
}

/* Language switcher: flag + "NL" / "EN" as pills (the text was hidden before) */
.leftContent h4 {
    margin: 28px 0 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #777E8D;
}
.btn_nl,
.btn_en {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: auto;
    height: 36px;
    margin: 0 8px 0 0;
    padding: 0 16px 0 46px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.04);
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 22px auto;
    text-indent: 0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.04em;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn_nl:hover,
.btn_en:hover {
    border-color: #6566ED;
    background-color: rgba(101, 102, 237, 0.2);
}
.btn_nl:focus-visible,
.btn_en:focus-visible {
    outline: 2px solid #6566ED;
    outline-offset: 2px;
}

/* Competition: one card with the logo next to the name */
.competitionContainer {
    display: flex;
    align-items: center;
    gap: 16px;
    height: auto;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.04);
}
/* Logo: fixed size and object-fit, so it is never squashed or pushed into the links below */
.competitionContainer img {
    flex: none;
    box-sizing: border-box;
    width: 76px;
    height: 76px;
    padding: 6px;
    border-radius: 50%;
    background-color: #fff;
    object-fit: contain;
}
.competitionContainer p {
    margin: 0;
    line-height: 1.4;
    font-size: 13px;
    color: #9AA1B2;
}
.competitionContainer .competitionName {
    margin-top: 4px;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: bold;
    color: #fff;
}

/* Footer links */
.footerMenu {
    padding-top: 24px;
    font-size: 13px;
}
.footerMenu a {
    font-size: 13px;
}
.footerCopy p {
    margin: 8px 0 0;
    font-size: 12px;
}

/* On a computer the sidebar has room for everything: no open/close button, text always shown */
@media (min-width: 981px) {
    #toggleContent {
        display: block !important;
    }
    .toggle-btn {
        display: none;
    }

    /* The sidebar stays on screen while the page on the right scrolls.
       When it is taller than the screen (long welcome text), it scrolls by itself.
       The page box grows with the form (it was one screen high), otherwise the sidebar has no room to stay put */
    .container {
        box-sizing: border-box;
        height: auto;
        min-height: 100vh;
    }
    .mainLeft {
        position: sticky;
        top: 8px;
        align-self: start;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }
    .mainLeft::-webkit-scrollbar {
        width: 8px;
    }
    .mainLeft::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.18);
    }
    .mainLeft::-webkit-scrollbar-track {
        background: transparent;
    }
}
/* Laptop screens: a bit less space between the parts, so the whole sidebar fits without scrolling */
@media (min-width: 981px) and (max-height: 960px) {
    .leftContainer {
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .leftContent {
        padding: 28px 0 20px;
    }
    .leftContent h4 {
        margin-top: 20px;
    }
    .footerMenu {
        padding-top: 16px;
    }
}

@media (max-width: 980px) {
    .leftContainer {
        max-width: none;
        margin: 16px;
    }
    .leftContent {
        padding: 24px 0 20px;
    }
    .toggle-btn {
        margin-top: 16px;
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 15px;
    }
    .arrow {
        font-size: 16px;
    }
}