/* TA Pagina's — bundle: search-overlay. Bron: oorspronkelijke Code Snippets-export. */
html.ta-ko-open,
			body.ta-ko-open {
				overflow:hidden !important;
			}

			.ta-ko-overlay {
				position:fixed;
				inset:0;
				z-index:999999;
				display:flex;
				align-items:flex-start;
				justify-content:center;
				padding:clamp(18px,5vh,55px) 18px 24px;
				visibility:hidden;
				opacity:0;
				transition:opacity .18s ease, visibility .18s ease;
			}

			.ta-ko-overlay.is-open {
				visibility:visible;
				opacity:1;
			}

			.ta-ko-backdrop {
				position:absolute;
				inset:0;
				background:rgba(7,18,46,.74);
				-webkit-backdrop-filter:blur(8px);
				backdrop-filter:blur(8px);
			}

			.ta-ko-dialog {
				position:relative;
				z-index:1;
				width:min(1180px,100%);
				max-height:calc(100vh - 70px);
				overflow:auto;
				border-radius:22px;
				background:#fff;
				box-shadow:0 30px 90px rgba(7,18,46,.35);
				transform:translateY(-10px);
				transition:transform .18s ease;
			}

			.ta-ko-overlay.is-open .ta-ko-dialog {
				transform:translateY(0);
			}

			.ta-ko-head {
				display:flex;
				align-items:flex-start;
				justify-content:space-between;
				gap:20px;
				padding:27px 30px 15px;
			}

			.ta-ko-head span {
				display:block;
				margin-bottom:5px;
				color:#244ad7;
				font-size:11px;
				font-weight:850;
				letter-spacing:.7px;
				text-transform:uppercase;
			}

			.ta-ko-head h2 {
				margin:0;
				padding:0;
				color:#14213d;
				font-size:clamp(25px,3vw,38px);
				font-weight:900;
				line-height:1.12;
			}

			.ta-ko-close {
				flex:0 0 43px;
				width:43px;
				height:43px;
				padding:0;
				border:1px solid #dbe5f0;
				border-radius:50%;
				background:#f8fafc;
				color:#42516b;
				font-size:27px;
				cursor:pointer;
			}

			.ta-ko-field-wrap {
				position:relative;
				margin:0 30px;
			}

			.ta-ko-field-wrap > svg {
				position:absolute;
				top:50%;
				left:18px;
				width:24px;
				height:24px;
				margin-top:-12px;
				fill:none;
				stroke:#8190a8;
				stroke-width:1.8;
				stroke-linecap:round;
				pointer-events:none;
			}

			#taKoInput {
				width:100%;
				min-height:62px;
				margin:0;
				padding:13px 58px;
				border:1px solid #cbd8e7;
				border-radius:15px;
				background:#f4f8fd;
				color:#14213d;
				font-size:clamp(16px,2vw,19px);
				font-weight:650;
				box-shadow:none;
			}

			#taKoInput:focus {
				border-color:#244ad7;
				background:#fff;
				outline:4px solid rgba(36,74,215,.1);
			}

			.ta-ko-clear {
				position:absolute;
				top:50%;
				right:13px;
				width:36px;
				height:36px;
				margin-top:-18px;
				padding:0;
				border:0;
				border-radius:50%;
				background:#e6edf7;
				color:#526079;
				font-size:22px;
				cursor:pointer;
			}

			.ta-ko-info {
				display:flex;
				align-items:center;
				justify-content:space-between;
				gap:12px;
				min-height:42px;
				padding:10px 31px 8px;
				color:#687790;
				font-size:12.5px;
			}

			.ta-ko-info small {
				padding:3px 8px;
				border:1px solid #dbe5f0;
				border-radius:6px;
				background:#f8fafc;
			}

			.ta-ko-results {
				min-height:105px;
				padding:5px 30px 30px;
			}

			.ta-ko-loading {
				display:flex;
				align-items:center;
				justify-content:center;
				gap:11px;
				min-height:130px;
				color:#687790;
				font-size:13px;
				font-weight:700;
			}

			.ta-ko-spinner {
				width:25px;
				height:25px;
				border:3px solid #dce5f3;
				border-top-color:#244ad7;
				border-radius:50%;
				animation:taKoSpin .7s linear infinite;
			}

			@keyframes taKoSpin {
				to { transform:rotate(360deg); }
			}

			.ta-ko-grid {
				display:grid;
				grid-template-columns:repeat(3,minmax(0,380px));
				gap:20px;
				justify-content:start;
				align-items:stretch;
			}

			.ta-ko-grid > * {
				width:100%;
				max-width:380px;
			}

			/*
			 * Kaartopmaak uit TA Examen Manager.
			 *
			 * De AJAX-response bevat dezelfde .taem-overview-card-HTML,
			 * maar de framework-CSS wordt normaal alleen afgedrukt door
			 * [ta_oefenexamen_zoeken]. Daarom laden we dezelfde klassen
			 * ook binnen deze overlay.
			 */
			.ta-ko-overlay {
				--taem-border:#dce5f0;
				--taem-muted:#687790;
			}

			.ta-ko-overlay .taem-overview-card {
				display:flex;
				flex-direction:column;
				width:100%;
				max-width:380px;
				height:100%;
				overflow:hidden;
				border:1px solid var(--taem-border);
				border-radius:22px;
				background:#fff;
				box-shadow:0 10px 30px rgba(23,49,100,.08);
				transition:
					transform .18s ease,
					box-shadow .18s ease,
					border-color .18s ease;
			}

			.ta-ko-overlay .taem-overview-card:hover {
				transform:translateY(-3px);
				border-color:#c8d6e8;
				box-shadow:0 18px 42px rgba(23,49,100,.14);
			}

			.ta-ko-overlay .taem-overview-card__image {
				display:block;
				overflow:hidden;
				aspect-ratio:16 / 8.1;
				background:#eef3ff;
			}

			.ta-ko-overlay .taem-overview-card__img {
				display:block;
				width:100%;
				height:100%;
				object-fit:cover;
			}

			.ta-ko-overlay .taem-overview-card__placeholder {
				display:flex;
				align-items:center;
				justify-content:center;
				width:100%;
				height:100%;
				color:#3156df;
				font-weight:800;
			}

			.ta-ko-overlay .taem-overview-card__body {
				display:flex;
				flex:1;
				flex-direction:column;
				padding:26px 23px 20px;
			}

			.ta-ko-overlay .taem-overview-card__eyebrow {
				margin:0 0 11px;
				color:#3156df;
				font-size:11px;
				font-weight:900;
				line-height:1.3;
				letter-spacing:.45px;
				text-transform:uppercase;
			}

			.ta-ko-overlay .taem-overview-card h3 {
				margin:0 0 7px;
				padding:0;
				font-size:25px;
				font-weight:850;
				line-height:1.2;
				letter-spacing:-.25px;
			}

			.ta-ko-overlay .taem-overview-card h3 a {
				color:#101c46;
				text-decoration:none;
			}

			.ta-ko-overlay .taem-overview-card h3 a:hover {
				color:#3156df;
			}

			.ta-ko-overlay .taem-overview-card__description {
				margin:0 0 18px;
				color:#687790;
				font-size:15px;
				line-height:1.55;
			}

			.ta-ko-overlay .taem-overview-card__features {
				display:grid;
				gap:9px;
				margin:0 0 24px;
				padding:0;
				list-style:none;
			}

			.ta-ko-overlay .taem-overview-card__features li {
				display:flex;
				align-items:flex-start;
				gap:10px;
				margin:0;
				padding:0;
				color:#35425c;
				font-size:14px;
				line-height:1.45;
				list-style:none;
			}

			.ta-ko-overlay .taem-overview-card__features li::before {
				display:none !important;
			}

			.ta-ko-overlay .taem-overview-card__features i {
				display:inline-flex;
				align-items:center;
				justify-content:center;
				flex:0 0 25px;
				width:25px;
				height:25px;
				border-radius:8px;
				background:#e8faf2;
				color:#079669;
				font-style:normal;
				font-weight:900;
				line-height:1;
			}

			.ta-ko-overlay .taem-overview-card__updated {
				display:flex;
				align-items:center;
				gap:8px;
				margin-top:auto;
				padding:9px 12px;
				border:1px solid #dce5f0;
				border-radius:11px;
				background:#f7faff;
				color:#687790;
				font-size:11px;
				line-height:1.4;
			}

			.ta-ko-overlay .taem-overview-card__updated i {
				flex:0 0 9px;
				width:9px;
				height:9px;
				border-radius:50%;
				background:#079669;
				box-shadow:0 0 0 4px rgba(7,150,105,.12);
			}

			.ta-ko-overlay .taem-overview-card__bottom {
				display:flex;
				align-items:flex-end;
				justify-content:space-between;
				gap:15px;
				margin-top:14px;
				padding-top:15px;
				border-top:1px solid #e5ebf3;
			}

			.ta-ko-overlay .taem-overview-card__price small,
			.ta-ko-overlay .taem-overview-card__price > span {
				display:block;
				color:#687790;
				font-size:10px;
				line-height:1.35;
			}

			.ta-ko-overlay .taem-overview-card__price small {
				font-weight:800;
				letter-spacing:.2px;
				text-transform:uppercase;
			}

			.ta-ko-overlay .taem-overview-card__price div {
				display:flex;
				align-items:baseline;
				flex-wrap:wrap;
				gap:8px;
				margin:4px 0 2px;
			}

			.ta-ko-overlay .taem-overview-card__price del {
				color:#94a3b8;
				font-size:14px;
				font-weight:500;
			}

			.ta-ko-overlay .taem-overview-card__price strong {
				color:#291b89;
				font-size:25px;
				font-weight:900;
				line-height:1;
			}

			.ta-ko-overlay .taem-overview-card__button {
				display:inline-flex;
				align-items:center;
				justify-content:center;
				gap:10px;
				min-height:50px;
				padding:12px 21px;
				border-radius:13px;
				background:linear-gradient(135deg,#3156df,#5940ed);
				color:#fff !important;
				font-size:14px;
				font-weight:800;
				line-height:1.2;
				text-decoration:none !important;
				white-space:nowrap;
				box-shadow:0 10px 22px rgba(49,86,223,.22);
				transition:
					transform .15s ease,
					box-shadow .15s ease;
			}

			.ta-ko-overlay .taem-overview-card__button:hover {
				transform:translateY(-1px);
				color:#fff !important;
				box-shadow:0 14px 28px rgba(49,86,223,.3);
			}

			.ta-ko-overlay .taem-overview-card__footnote {
				margin-top:14px;
				color:#9aa7bb;
				font-size:10px;
				line-height:1.4;
				text-align:center;
			}

			.ta-ko-empty {
				display:flex;
				align-items:center;
				justify-content:center;
				flex-direction:column;
				min-height:180px;
				padding:28px;
				border:1px dashed #cbd8e7;
				border-radius:16px;
				background:#f8fbfe;
				text-align:center;
			}

			.ta-ko-empty strong,
			.ta-ko-empty span {
				display:block;
			}

			.ta-ko-empty strong {
				margin-bottom:5px;
				color:#14213d;
				font-size:16px;
			}

			.ta-ko-empty span {
				color:#687790;
				font-size:13px;
			}

			/*
			 * Alleen de geopende Kadence-drawer verbergen.
			 * Niet permanent, zodat de header verder normaal blijft werken.
			 */
			body.ta-ko-open #search-drawer {
				display:none !important;
			}

			@media (max-width:940px) {
				.ta-ko-grid {
					grid-template-columns:repeat(2,minmax(0,380px));
				}
			}

			@media (max-width:650px) {
				.ta-ko-overlay {
					padding:0;
				}

				.ta-ko-dialog {
					width:100%;
					max-height:100vh;
					min-height:100vh;
					border-radius:0;
				}

				.ta-ko-head {
					padding:21px 18px 13px;
				}

				.ta-ko-field-wrap {
					margin:0 18px;
				}

				#taKoInput {
					min-height:56px;
					padding-left:52px;
					font-size:16px;
				}

				.ta-ko-info {
					padding-right:19px;
					padding-left:19px;
				}

				.ta-ko-info small {
					display:none;
				}

				.ta-ko-results {
					padding:4px 18px 24px;
				}

				.ta-ko-grid {
					grid-template-columns:minmax(0,380px);
					justify-content:center;
				}


				.ta-ko-overlay .taem-overview-card__body {
					padding:22px 19px 18px;
				}

				.ta-ko-overlay .taem-overview-card h3 {
					font-size:23px;
				}

				.ta-ko-overlay .taem-overview-card__bottom {
					align-items:stretch;
					flex-direction:column;
				}

				.ta-ko-overlay .taem-overview-card__button {
					width:100%;
				}
			}