/* =========================================================================
   SoftCad static styles
   Shims for Tailwind v4 utilities used by the original source that are NOT
   present in the Tailwind v3 CDN build, plus a few custom helpers.
   ========================================================================= */

:root {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

* {
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

/* ---- Fractional sizing used in the source (w-4.5, h-4.5, min-w-4.5) ---- */
.w-4\.5 { width: 1.125rem; }
.h-4\.5 { height: 1.125rem; }
.min-w-4\.5 { min-width: 1.125rem; }
.h-18 { height: 4.5rem; }
.sm\:h-18 { }
@media (min-width: 640px) { .sm\:h-18 { height: 4.5rem; } }

/* ---- Tailwind v4 extra-small shadows / rings ---- */
.shadow-2xs { box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.04); }
.shadow-xs  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.rounded-xs { border-radius: 0.125rem; }

/* ---- backdrop blur extra-small ---- */
.backdrop-blur-2xs { backdrop-filter: blur(2px); }
.backdrop-blur-xs  { backdrop-filter: blur(3px); }

/* ---- active scale helpers ---- */
.active\:scale-98:active { transform: scale(0.98); }

/* ---- line clamp (v3 CDN has it, but keep as fallback) ---- */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ---- hidden scrollbar ---- */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ---- 3D perspective for the software box ---- */
.perspective-1000 { perspective: 1000px; transform-style: preserve-3d; }

/* ---- slow spin (DJ disc illustration) ---- */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 6s linear infinite; }

/* ---- Entry animations (replacements for tailwindcss-animate "animate-in") ---- */
@keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-zoom-in-95 { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes sc-slide-in-top { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes sc-slide-in-bottom { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

.animate-in { animation-duration: 200ms; animation-fill-mode: both; animation-name: sc-fade-in; }
.fade-in { animation-name: sc-fade-in; }
.zoom-in-95 { animation-name: sc-fade-in, sc-zoom-in-95; }
.slide-in-from-top-2 { animation-name: sc-fade-in, sc-slide-in-top; }
.slide-in-from-bottom-4 { animation-name: sc-fade-in, sc-slide-in-bottom; }
.duration-150 { animation-duration: 150ms; }
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }

/* ---- Toast position helper reused across app ---- */
.sc-toast {
  position: fixed;
  top: 5rem;
  right: 1.25rem;
  z-index: 50;
}

/* ---- Utility: tabular numbers already supported; make <select> look native-neutral ---- */
select { background-image: none; }

/* ---- Ensure smooth images ---- */
img { max-width: 100%; }

/* ---- scale helpers used on product detail hero ---- */
.sm\:scale-135 { }
@media (min-width: 640px) { .sm\:scale-135 { transform: scale(1.35); } }
.scale-135 { transform: scale(1.35); }

/* print: keep license keys readable */
@media print {
  header, footer, .no-print { display: none !important; }
}