/* Generic popup/side-window shell (ktpop-*)
 *
 * Keep this file free of feature-specific styles (Fast Cart, etc.).
 */

.ktpop-sr-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ktpop-sr-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.ktpop-overlay {
	align-items: flex-start;
	bottom: 0;
	display: flex !important;
	justify-content: center;
	left: 0;
	opacity: 1;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	right: 0;
	top: 0;
	transform: translate(100vw);
	z-index: 1000000;
}

@media (max-width: 989px) {
	.ktpop-overlay {
		padding-bottom: 30px;
	}
}

.ktpop-overlay[aria-hidden='false'] {
	transform: translate(0);
}

/* Optional generic window helper class.
 * Feature scripts can attach this to their window element to get a consistent open fade-in.
 */
.ktpop-window {
	opacity: 0;
	transition: opacity 0.4s;
}

@media (prefers-reduced-motion: reduce) {
	.ktpop-window {
		transition: 0s;
	}
}

.ktpop-overlay[aria-hidden='false']:not(.closing) .ktpop-window {
	opacity: 1;
}

.ktpop-backdrop {
	background-color: transparent;
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transform: translate3d(100vw, 0, 0);
	transition: background-color 0.4s;
	z-index: 999999;
}

@media (prefers-reduced-motion: reduce) {
	.ktpop-backdrop {
		transition: 0s;
	}
}

.closing + .ktpop-backdrop {
	background-color: transparent;
}

.ktpop-overlay[aria-hidden='false']:not(.closing) + .ktpop-backdrop {
	background-color: rgba(0, 0, 0, 0.75);
}

.ktpop-overlay[aria-hidden='false'] + .ktpop-backdrop {
	transform: translateZ(0);
}

@media screen and (min-width: 782px) {
	.admin-bar .ktpop-overlay {
		top: 32px;
	}
}

html.ktpop-lock-scrolling {
	height: unset !important;
	overflow: unset !important;
}

html.ktpop-lock-scrolling body {
	height: 100% !important;
	overflow: hidden !important;
	position: absolute !important;
	width: 100% !important;
}