/*
Theme Name: ReserveMyDomainName.com
Theme URI: https://reservemydomainname.com
Version: 4.203
*/

html, body {
	margin: 0;
	padding: 0;
	font-family: "Parkinsans", sans-serif;
	font-size: 17px;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: #212121;
}

* {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	outline: none;
	-webkit-appearance: none;
	vertical-align: top;
	border-spacing: 0;
	border-collapse: collapse;
	list-style: none;
	font-family: "Parkinsans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	background: transparent;
}

input {
	font-size: 17px;
	font-weight: 400;
	font-family: "Parkinsans", sans-serif;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.wrap {
	max-width: 1080px;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: #22b1d3;
}

h1 {
	font-size: 32px;
	text-wrap: balance;
}
h2 {
	font-size: 32px;
	text-wrap: balance;
}
h3 {
	font-size: 20px;
}

header {
	padding: 20px;
}

.header-grid {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 20px;
}

.logo {
	justify-self: start;
	font-size: 20px;
	font-weight: 600;
	color: #212121;
}
	.logo:hover {
		color: #22b1d3;
	}

.menu {
	justify-self: end;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}
	.menu a {
		font-size: 16px;
		font-weight: 600;
		color: #212121;
	}
	.menu a:hover {
		color: #22b1d3;
	}
	.menu img {
		margin: 1px 0 0 0;
	}

.main-header {
	padding: 80px 60px 90px 60px;
	background: #20B2AA;
	background: #4343F0;
	background: url('img/background.jpg') center center no-repeat #86ddf1;
	background-size: cover;
}
	.main-header .inner-wrap {
		max-width: 600px;
	}

.main-header h1 {
	font-size: 40px;
	margin: 0 0 20px 0;
}
	.main-header h1 .underline {
		text-decoration: underline;
	}
.main-header h2 {
	font-size: 20px;
	font-weight: 600;
	margin: 25px 0 0 0;
}
.main-header p {
	margin: 5px 0 0 0;
	font-weight: 300;
}

form.reserve-form {
	width: 100%;
}
	form.reserve-form input {
		width: 100%;
		height: 70px;
		background: #fff;
		padding: 0 80px 0 20px;
		border-radius: 10px;
	}
	form.reserve-form button {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 54px;
		height: 54px;
		border-radius: 6px;
		background: #FFA500;
	}
	form.reserve-form button:hover {
		background: #e69500;
	}

.main-header .button {
	display: inline-block;
	margin: 50px 0 0 0;
	padding: 12px 20px;
	background: #212121;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	font-weight: 600;
}
.main-header .button:hover {
	background: #fff;
	color: #17202A;
}

.page-header {
	background: #f1f3f4;
	padding: 40px 20px;
}
	.page-header h1 {
		text-align: center;
		font-size: 40px;
		margin: 40px 0 0 0;
	}
	.page-header h2 {
		font-size: 20px;
		font-weight: 600;
	}
		.page-header h1 span,
		.page-header h2 span {
			color: #22b1d3;
		}
	.page-header p {
		margin: 10px 0;
		text-align: center;
	}

.reserve-block {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 20px;
	margin: 20px 0 0 0;
	padding: 10px 10px 10px 30px;
	border-radius: 10px;
	background: #fff;
}
	.reserve-block .button {
		justify-self: end;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 20px 30px;
		background: #49c5e1;
		color: #fff;
		font-size: 18px;
		border-radius: 5px;
		font-weight: 600;
	}
	.reserve-block .button:hover {
		background: #42b1cb;
	}

	.button-default {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 20px 30px;
		background: #49c5e1;
		color: #fff;
		font-size: 18px;
		border-radius: 5px;
		font-weight: 600;
	}
	.button-default:hover {
		background: #42b1cb;
	}
	.button-default.red {
		background: #f44336;
	}
	.button-default.red:hover {
		background: #dc3c31;
	}

.our-pros {
	margin: 75px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	column-gap: 40px;
	row-gap: 20px;
}
	.our-pros .item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 15px;
		font-size: 20px;
		font-weight: 600;
	}
		.our-pros .item .name {
			font-size: 14px;
			font-weight: 300;
		}

main {
	margin: 80px 0;
	padding: 0 20px;
}
main.grey {
	background: #f1f3f4;
	margin: 0;
	padding: 80px 20px;
}

.login {
	max-width: 450px;
}

.form-login {
	display: grid;
	grid-template-columns: 1fr;
	gap: 25px;
	background: #fff;
	margin: 20px 0 0 0;
	padding: 30px;
	border-radius: 10px;
}
	.form-login label {
		font-weight: 600;
	}
	.form-login .label-grid {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: 10px;
	}
		.form-login .label-grid a {
			display: inline-block;
			margin: 0 0 2px 0;
			font-size: 14px;
		}
		.form-login .label-grid a:hover {
			text-decoration: underline;
		}
	.form-login input {
		width: 100%;
		border: 1px solid #212121;
		height: 50px;
		margin: 10px 0 0 0;
		padding: 0 15px;
		border-radius: 4px;
	}
	.form-login button {
		display: inline-block;
		height: 52px;
		background: #49c5e1;
		color: #fff;
		font-size: 18px;
		border-radius: 5px;
		font-weight: 600;
	}
	.form-login button:hover {
		background: #42b1cb;
	}
	.form-login p {
		text-align: center;
	}
		.form-login p a {
			text-decoration: underline;
		}
		.form-login p a:hover {
			text-decoration: none;
		}

main p.subtitle {
	margin: 5px 0 0 0;
}

.create {
	max-width: 800px;
}
.form-register {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	background: #fff;
	margin: 20px 0 0 0;
	padding: 30px;
	border-radius: 10px;
}
	.form-register .section {
		display: grid;
		grid-template-columns: 1fr;
	}
	.form-register .title {
		font-weight: 600;
		margin: 10px 0 0 0;
	}
	.form-register .row-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 25px;
	}
		.form-register .row-grid .title {
			grid-column: span 2;
		}
		.form-register label {
			display: block;
			margin: 10px 0 0 0;
		}
		.form-register label.info {
			opacity: 0.5;
			font-size: 16px;
			margin: 10px 0 0 0;
		}
		.form-register label.info.margined {
			margin: 10px 0 15px 0;
		}
	.form-register input {
		width: 100%;
		border: 1px solid #212121;
		height: 50px;
		margin: 10px 0 0 0;
		padding: 0 15px;
		border-radius: 4px;
	}
	.form-register input[type="radio"] {
		width: auto;
		border: 0;
		height: auto;
		-webkit-appearance: radio;
	}
	.form-register button {
		display: inline-block;
		height: 52px;
		background: #49c5e1;
		color: #fff;
		margin: 10px 0 0 0;
		font-size: 18px;
		border-radius: 5px;
		font-weight: 600;
	}
	.form-register button:hover {
		background: #42b1cb;
	}
	.form-register .form-checkbox {
		margin: 10px 0 0 0;
		display: grid;
		grid-template-columns: 1fr;
	}
		.form-register .form-checkbox .checkbox-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;
		}

.how {
	text-align: center;
}
.how-clean {
	padding: 0;
}
	.how p {
		margin: 10px 0 0 0;
	}
	.how p.subtitle {
		text-wrap: balance;
	}

.explanation {
	margin: 120px 0 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
	gap: 40px;
}
	.explanation .item {
		display: flex;
		flex-direction: column;
		text-align: left;
		background: #f1f3f4;
		border-radius: 10px;
		padding: 30px;
		line-height: 1.6;
	}
	.explanation .item img {
		align-self: center;
		justify-self: center;
		margin: -100px 0 20px 0;
	}

.why {
	background: #f1f3f4;
	border-radius: 10px;
	padding: 60px;
	margin: 90px 0 0 0;
}
	.why p {
		margin: 20px 0 0 0;
		line-height: 1.8;
	}
	.why .button {
		display: inline-block;
		margin: 50px 0 0 0;
		padding: 20px 30px;
		background: #49c5e1;
		color: #fff;
		font-size: 18px;
		border-radius: 5px;
		font-weight: 600;
	}
	.why .button:hover {
		background: #42b1cb;
	}

.faq {
	max-width: 700px;
	padding: 80px 0 0 0;
}
	.faq h3 {
		margin: 40px 0 0 0;
	}
	.faq p {
		margin: 10px 0 0 0;
		line-height: 1.8;
	}
	.faq a {
		text-decoration: underline;
	}
	.faq a:hover {
		text-decoration: none;
	}

.domains {
	padding: 80px 20px;
	background: #86ddf1;
	color: #212121;
}
.domain-list {
	column-count: 4;
	column-fill: balance;
	column-gap: 20px;
	margin: 10px 0 0 0;
}
	.domain-list li {
		padding: 20px 0 0 0;
	}
		.domain-list li a {
			color: #212121;
		}
		.domain-list li a:hover {
			text-decoration: underline;
		}

.cart .wrap {
	max-width: 500px;
}
.cart .button-default {
	width: 100%;
}
table.cart {
	width: 100%;
	max-width: 500px;
	margin: 20px 0;
}
	table.cart th {
		text-align: left;
		padding: 10px 20px 10px 0;
		border-bottom: 2px solid #212121;
		font-weight: 600;
	}
	table.cart td {
		padding: 10px 20px 10px 0;
		border-top: 1px solid #212121;
		vertical-align: middle;
	}
	table.cart td.domain {
		width: 100%;
	}
	table.cart td.price {
		text-align: right;
	}
	table.cart td.remove {
		padding: 10px 0;
		vertical-align: middle;
		white-space: nowrap;
	}
		table.cart td a:hover {
			text-decoration: underline;
		}
		table.cart td.remove form,
		table.cart td.remove img {
			display: block;
			width: 18px;
			height: 18px;
		}
	table.cart td.last {
		text-align: right;
		border-top: 2px solid #212121;
		font-weight: 600;
	}

table.table {
	width: 100%;
	max-width: 500px;
	margin: 20px 0;
}
	table.table td {
		padding: 10px 20px 10px 0;
		vertical-align: middle;
	}

/* Algemene stijlen voor meldingen */
.success-message,
.error-message {
	margin: 0 0 40px 0;
    padding: 15px 20px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    display: block;
}

/* Stijl voor succesmeldingen */
.success-message {
    background-color: #d4edda; /* Lichtgroene achtergrond */
    color: #155724; /* Donkergroene tekst */
    border: 1px solid #c3e6cb; /* Lichte groene rand */
}

/* Stijl voor foutmeldingen */
.error-message {
    background-color: #f8d7da; /* Lichtrode achtergrond */
    color: #721c24; /* Donkerrode tekst */
    border: 1px solid #f5c6cb; /* Lichte rode rand */
}

.error-message p {
    margin: 5px 0 4px 0;
}

/* Responsiviteit */
@media (max-width: 768px) {
    .success-message,
    .error-message {
        font-size: 14px;
    }
}

footer {
	background: #212121;
	padding: 40px 20px;
	font-size: 15px;
	color: #fff;
}
	.footer-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 20px;
		row-gap: 10px;
	}
		.footer-grid a {
			color: #fff;
		}