/* Postcode checker block and its result dialog */
.kb-zip {
	padding: 28px 0 40px;
	background-color: #1f5fa4;
	background-image:
		repeating-linear-gradient(to bottom, transparent 25px, rgba(255, 255, 255, .1) 26px, rgba(255, 255, 255, .1) 26px, transparent 27px, transparent 51px, rgba(255, 255, 255, .1) 52px, rgba(255, 255, 255, .1) 52px, transparent 53px, transparent 77px, rgba(255, 255, 255, .1) 78px, rgba(255, 255, 255, .1) 78px, transparent 79px, transparent 103px, rgba(255, 255, 255, .1) 104px, rgba(255, 255, 255, .1) 104px, transparent 105px, transparent 129px, rgba(255, 255, 255, .1) 10px, rgba(255, 255, 255, .1) 10px),
		repeating-linear-gradient(to right, transparent 25px, rgba(255, 255, 255, .1) 26px, rgba(255, 255, 255, .1) 26px, transparent 27px, transparent 51px, rgba(255, 255, 255, .1) 52px, rgba(255, 255, 255, .1) 52px, transparent 53px, transparent 77px, rgba(255, 255, 255, .1) 78px, rgba(255, 255, 255, .1) 78px, transparent 79px, transparent 103px, rgba(255, 255, 255, .1) 104px, rgba(255, 255, 255, .1) 104px, transparent 105px, transparent 129px, rgba(255, 255, 255, .1) 10px, rgba(255, 255, 255, .1) 10px);
}
.kb-zip__form {
	max-width: 800px;
	height: fit-content;
	margin: 20px auto;
	padding: 20px;
	border: 8px solid #fff;
	border-radius: 8px;
	background: #f2f2f2;
}
.kb-zip__lead {
	margin: 5px 0 20px;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
}
.kb-zip__field {
	display: flex;
	width: 80%;
	margin: 0 auto;
	border-radius: 30px;
	box-shadow: 0 2px 5px -2px #bbb;
	font-size: 28px;
}
.kb-zip__input {
	width: 70%;
	height: 50px;
	padding: 12px 21px;
	border: 0;
	border-radius: 10px 0 0 10px;
	color: #000;
	font-family: "Yu Gothic UI", sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-align: left;
	word-break: break-all;
}
.kb-zip__input:focus { outline: 0; }
.kb-zip__submit {
	width: 30%;
	height: 50px;
	margin: 0 auto;
	padding: 10px;
	border-radius: 0 10px 10px 0;
	background: #ff8129;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.kb-zip__hint {
	margin-top: 10px;
	color: #4e98d9;
	font-size: 14px;
	text-align: center;
}

@media (max-width: 768px) {
	.kb-zip { padding: 38px 0 1px; }
	.kb-zip__form { width: 95%; margin-top: 30px; padding: 18px; }
	.kb-zip__lead { font-size: 20px; }
	.kb-zip__field { width: 100%; }
	.kb-zip__input { width: 100%; }
	.kb-zip__submit { width: 85%; padding-top: 14px; font-size: 13px; }
	.kb-zip__hint { margin: 10px 0; font-size: 12px; }
}

/* Result dialog */
.kb-zip__modal {
	position: fixed;
	inset: 0;
	z-index: 1050;
	opacity: 0;
	visibility: hidden;
	transition: .5s;
}
.kb-zip__modal.is-open {
	z-index: 999999;
	opacity: 1;
	visibility: visible;
}
.kb-zip__backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.kb-zip__dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 9999;
	width: 90%;
	padding: 30px;
	border: 3px solid #004b9b;
	border-radius: 10px;
	background: #fff;
	transform: translate(-50%, -50%);
}
.kb-zip__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 700;
	line-height: 50px;
	cursor: pointer;
}
.kb-zip__code {
	height: 50px;
	color: #004b9b;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}
.kb-zip__result {
	height: 80px;
	text-align: center;
}
.kb-zip__line {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
}
.kb-zip__call {
	display: none;
	max-width: 500px;
	margin: 20px auto 0;
}
.kb-zip__call.is-open { display: block; }
.kb-zip__call img { width: 100%; height: auto; }

@media (max-width: 768px) {
	.kb-zip__dialog { width: 95%; padding: 0 0 10px; }
	.kb-zip__code-wrap { margin-top: 30px; }
	.kb-zip__result { height: 20px; margin-bottom: 30px; }
}