/**
 * Hand-written CSS that Tailwind utility classes can't express.
 *
 * The original React app's modals/drawer used `animate-in fade-in
 * zoom-in-95 slide-in-from-top-2 duration-150` classes from the
 * `tailwindcss-animate` plugin — but that plugin was never actually
 * installed in the source project's package.json, so in the live app
 * those classes are inert and everything just appears/disappears
 * instantly with no transition. This file adds a small, tasteful
 * transition for that open/close moment (a few lines, invisible at
 * rest, no effect on layout or any other visual) rather than
 * reproducing the same dead classes verbatim.
 *
 * @package technopet
 */

/* Custom scrollbar — ported verbatim from the original src/index.css */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Modal / mobile-drawer open transition */
@keyframes tp-fade-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
.tp-anim-modal {
	animation: tp-fade-zoom-in 150ms ease-out;
}

@keyframes tp-slide-down {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.tp-anim-slide-down {
	animation: tp-slide-down 150ms ease-out;
}

/* Screen-reader-only text, revealed on keyboard focus (skip link) */
.screen-reader-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;
}
.screen-reader-text:focus {
	background-color: #0f172a;
	color: #fff;
	display: block;
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	padding: 12px 16px;
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	text-decoration: none;
	border-radius: 8px;
	line-height: normal;
}

/* Line-clamp fallback isn't needed — Tailwind v4 ships line-clamp-* as a
   core utility, used throughout the theme templates as `line-clamp-1/2/3`. */

/* Print: keep the RFQ / product spec sheets clean if a customer prints one */
@media print {
	#header-topbar,
	#main-sticky-header,
	#main-footer,
	#search-modal-backdrop,
	#quote-modal-backdrop,
	#strap-calc-backdrop,
	[data-open] {
		display: none !important;
	}
}