.tmpl-certificate-page {
	position: relative;
	.nav {
		position: sticky;
		top: calc(var(--header-height) + var(--admin-bar-height, 0px));
		z-index: 1;
		background-color: #fff;
		border-top: 1px solid #28333e;
		border-bottom: 1px solid #28333e;
		padding: 22px 0;
		position: sticky;
		&-wrap {
			position: relative;
			display: flex;
			overflow-y: auto;
			@include media-min($large) {
				display: block;
			}
		}
		.menu-primary {
			padding-right: 42px;
			@include media-min($large) {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
		&-container {
			gap: 21px;
			display: none;
			@include media-min(800px) {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		a {
			font-size: 15px;
			font-weight: 500;
			line-height: 23px;
			text-decoration: none;
			color: #000;
			white-space: noWrap;
			&:hover {
				text-decoration: underline;
			}
		}
		&-toggle {
			@include media-min(800px) {
				display: none;
			}
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			padding: 10px 4px 10px 10px;
			cursor: pointer;
			display: flex;
			align-items: center;
			i {
				display: block;
				background: url("#{$theme-url-base}/media/svg/general/chevron-down.svg") no-repeat
					center/contain;
				width: 12px;
				height: 12px;
				transition: all 0.2s;
			}
			&.active {
				i {
					transform: rotate(180deg);
				}
			}
		}
		&-dropdown {
			position: absolute;
			left: 0;
			right: 0;
			top: 70px;
			background: #fff;
			height: 0;
			overflow: hidden;
			transition: all 0.3s;
			@include media-min(800px) {
				display: none;
			}
			.contain {
				padding-top: 20px;
				padding-bottom: 20px;
			}
			a {
				display: block;
				padding: 12px 0;
			}
			&.active {
				height: auto;
				border-bottom: 1px solid;
			}
		}
	}
	h1 {
		font-size: 40px;
		line-height: 48px;
		font-weight: 700;
		@include media-min($medium) {
			font-size: 64px;
			line-height: 68px;
		}
	}
	&.certificate {
		.certificate-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 32px;
			@include media-min($medium) {
				flex-direction: row;
			}
		}
		.viewer-container {
			position: relative;
			flex: 1.2;
			width: 100%;
			&.loading {
				.ui__spin-loader {
					opacity: 1;
					animation-play-state: running;
				}
			}
		}
		.pdf-viewer {
			position: relative;
			text-align: center;
			height: 400px;
			margin-top: 16px;
			iframe {
				border: none;
			}
		}
		.ui__spin-loader {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			opacity: 0;
			transition: opacity var(--default-transition-params);
			pointer-events: none;
			animation-play-state: paused;
		}
		.info {
			flex: 1;
			&-container {
				width: 80%;
				margin: auto;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 32px;
			}
			.item {
				position: relative;
				padding-left: 30px;
				font-size: 16px;
				font-weight: 500;
				line-height: 22px;
				display: flex;
				flex-direction: column;
				justify-content: center;

				&::before {
					content: "";
					height: 80%;
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					background-color: #dc150b;
					width: 14px;
					border-radius: 6px;
				}
			}
			.label {
				font-size: 15px;
				font-weight: 400;
				line-height: 21px;
				color: #8b96a2;
				margin-bottom: 10px;
			}
		}
		.loader-container {
			&.loading {
				min-height: 500px;
				.ui__spin-loader {
					opacity: 1;
					animation-play-state: running;
				}
			}
		}
		.no-result-container {
			padding: 30px 0;
			text-align: center;
			font-size: 50px;
			font-weight: 700;
			line-height: 58px;
			color: #a2adb9;
			svg {
				margin: 90px 0;
			}
		}
	}
	&.get-public-certificate {
		.form-container {
			margin-top: 60px;
			margin-bottom: 100px;
			form {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.form-field-row {
				display: flex;
				gap: 20px;
				@include media-min($medium) {
					gap: 40px;
				}
				& + .form-field-row {
					margin-top: 30px;
				}
			}
			input,
			select {
				max-width: 338px;
				@include media-min($medium) {
					width: 338px;
				}
			}
			select {
				color: rgba(0, 0, 0, 0.3);
				&.valid {
					color: #000;
				}
			}
		}
		.error-message {
			position: relative;
			padding-top: 20px;
			height: 56px;
			opacity: 0;
			transition: all 0.2s;
			color: #dc150b;
			&.error {
				opacity: 1;
			}
		}
		.no-result-container,
		.result-container {
			text-align: center;
			a {
				color: #509dea;
			}
		}
	}
	&.verification-certificate {
		.form-container {
			margin-top: 60px;
			margin-bottom: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			form {
				width: 100%;
				max-width: 746px;
				.label {
					font-family: var(--font-moderat-mono);
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
					color: #74808b;
					padding-bottom: 15px;
				}
				input {
					width: 100%;
				}
			}
			.error-message {
				padding-top: 6px;
				height: 36px;
				opacity: 0;
				transition: all 0.2s;
				color: #dc150b;
				&.error {
					opacity: 1;
				}
			}
		}
		.no-result-container {
			width: 100%;
			max-width: 746px;
			margin-left: auto;
			margin-right: auto;
			ul {
				font-family: var(--font-moderat-mono);
				color: #dc150b;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				text-align: left;
				list-style-position: inside;
			}
		}
		.result-container {
			margin-top: 60px;
			margin-left: auto;
			margin-right: auto;
			max-width: 1022px;
			border: 1px solid #a2adb9;
			background-color: #fff;
			box-shadow: 4px 4px 22px 0px #00000040;
			padding: 40px 20px;
			@include media-min($medium) {
				padding: 40px 20px 40px 70px;
			}
			.status {
				color: #8b96a2;
				font-family: var(--font-moderat-mono);
			}
			.cert {
				font-size: 40px;
				line-height: 48px;
				font-weight: 400;
				color: #2c80ce;
				margin-top: 28px;
				@include media-min($medium) {
					font-size: 50px;
					line-height: 56px;
				}
			}
			.name {
				margin-top: 80px;
				font-size: 40px;
				line-height: 48px;
				font-weight: 700;
				@include media-min($medium) {
					font-size: 50px;
					line-height: 56px;
				}
			}
			.date {
				font-family: var(--font-moderat-mono);
				margin-top: 40px;
				margin-bottom: 28px;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				b {
					font-weight: 700;
				}
			}
			.id {
				font-family: var(--font-moderat-mono);
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
			}
		}
	}
}