/* RISITEX theme: small additions on top of the live design-system CSS (rx-tokens.css + rx-app.css).
   The compiled live CSS only contains classes the live site used, so anything new is defined here. */

[x-cloak] { display: none !important; }

/* Next.js put these on <html> via next/font; the design tokens read them for --font-sans / --font-mono. */
:root {
	--font-ibm-plex-sans: "IBM Plex Sans";
	--font-ibm-plex-mono: "IBM Plex Mono";
	/* from @risitex/ui styles.css (not in the compiled bundle) */
	--font-display: var(--font-ibm-plex-sans), "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-sans: var(--font-ibm-plex-sans), "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: var(--font-ibm-plex-mono), "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
body { font-family: var(--font-sans); }

/* cart count badge */
.rx-badge {
	position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: var(--text-primary); color: var(--surface-background);
	font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}

/* utilities used by the ported header that the compiled CSS may not include */
.rotate-180 { transform: rotate(180deg); }
.pointer-events-auto { pointer-events: auto; }
.translate-y-0 { transform: translateY(0); }
.opacity-100 { opacity: 1; }
.z-modal { z-index: 1050; }
.shadow-popover { box-shadow: 0 20px 60px -16px rgba(20, 20, 18, 0.28); }
.bg-surface-overlay { background: var(--surface-overlay, rgba(0, 0, 0, 0.5)); }

/* utilities the shared header/footer use that the compiled live CSS lacks */
@media (min-width: 1536px) {
	.\32xl\:px-16 { padding-left: 4rem; padding-right: 4rem; }
	.\32xl\:max-w-\[1440px\] { max-width: 1440px; }
}
.pr-9 { padding-right: 2.25rem; }
@keyframes rx-spin { to { transform: rotate(360deg); } }
.animate-spin { animation: rx-spin 1s linear infinite; }

/* footer bottom row: stack on phones instead of overflowing */
@media (max-width: 640px) {
	footer .rx-footer-legal { flex-direction: column; align-items: flex-start; }
	footer .rx-footer-legal p { overflow-wrap: anywhere; }
}

/* auth pages */
.text-display-md { font-family: var(--font-display); font-size: 2.25rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.tracking-\[0\.5em\] { letter-spacing: 0.5em; }
.min-h-\[80vh\] { min-height: 80vh; }
.max-w-\[460px\] { max-width: 460px; }
.normal-case { text-transform: none; }
.rx-input-error { border-color: var(--feedback-danger-border, #dc2626) !important; }
select.h-11 { appearance: auto; }

/* logo swap for dark mode (the live CSS keys this off [data-theme]) */
:root:not([data-theme="dark"]) .rx-logo-light { display: none; }
[data-theme="dark"] .rx-logo-black { display: none; }

/* scroll reveal (x-reveal directive in rx-site.js) */
.rx-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.rx-reveal.rx-reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.rx-reveal { opacity: 1; transform: none; transition: none; }
}