/* =============================================
   Bandsägeshop Theme - Custom CSS
   Version: 1.0.0
   ============================================= */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f8f9fa; }
::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6c757d; }

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product image hover zoom */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* Prose typography overrides (product descriptions) */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #102a43;
    font-weight: 700;
}

.prose a {
    color: #2563eb;
    text-decoration: underline;
}

.prose a:hover {
    color: #1d4ed8;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.prose table th,
.prose table td {
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.prose table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.prose img {
    border-radius: 0.75rem;
    max-width: 100%;
    height: auto;
}

/* Aspect ratio polyfill for older browsers */
.aspect-square { aspect-ratio: 1/1; }
.aspect-video { aspect-ratio: 16/9; }

/* SweetAlert2 theme overrides */
.swal2-popup {
    border-radius: 1rem !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

.swal2-confirm {
    background-color: #2563eb !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
}

.swal2-toast {
    border-radius: 0.75rem !important;
}

/* Print styles */
@media print {
    header, footer, nav, .sticky, button, .no-print { display: none !important; }
    body { background: white; }
    .container { max-width: 100%; }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

/* Category card color classes - dynamic bg support */
.bg-green-50 { background-color: #f0fdf4; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-red-50 { background-color: #fef2f2; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-teal-50 { background-color: #f0fdfa; }
.bg-purple-50 { background-color: #faf5ff; }
.bg-orange-50 { background-color: #fff7ed; }

.text-green-600 { color: #16a34a; }
.text-blue-600 { color: #2563eb; }
.text-indigo-600 { color: #4f46e5; }
.text-red-600 { color: #dc2626; }
.text-amber-600 { color: #d97706; }
.text-teal-600 { color: #0d9488; }
.text-purple-600 { color: #9333ea; }
.text-orange-600 { color: #ea580c; }

/* Number input spinner removal */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* =============================================
   Color Overrides: Orange/Amber → Blue
   Replaces theme accent from amber to blue
   ============================================= */

/* Text colors */
.text-orange-50  { color: #eff6ff !important; }
.text-orange-100 { color: #dbeafe !important; }
.text-orange-200 { color: #bfdbfe !important; }
.text-orange-300 { color: #93c5fd !important; }
.text-orange-400 { color: #60a5fa !important; }
.text-orange-500 { color: #3b82f6 !important; }
.text-orange-600 { color: #2563eb !important; }
.text-orange-700 { color: #1d4ed8 !important; }
.text-orange-800 { color: #1e40af !important; }
.text-orange-900 { color: #1e3a8a !important; }

.text-amber-50  { color: #eff6ff !important; }
.text-amber-100 { color: #dbeafe !important; }
.text-amber-200 { color: #bfdbfe !important; }
.text-amber-500 { color: #3b82f6 !important; }
.text-amber-600 { color: #2563eb !important; }
.text-amber-700 { color: #1d4ed8 !important; }
.text-amber-800 { color: #1e40af !important; }
.text-amber-900 { color: #1e3a8a !important; }

/* Background colors */
.bg-orange-50  { background-color: #eff6ff !important; }
.bg-orange-100 { background-color: #dbeafe !important; }
.bg-orange-200 { background-color: #bfdbfe !important; }
.bg-orange-400 { background-color: #60a5fa !important; }
.bg-orange-500 { background-color: #3b82f6 !important; }
.bg-orange-600 { background-color: #2563eb !important; }
.bg-orange-700 { background-color: #1d4ed8 !important; }

.bg-amber-50  { background-color: #eff6ff !important; }
.bg-amber-100 { background-color: #dbeafe !important; }
.bg-amber-200 { background-color: #bfdbfe !important; }
.bg-amber-500 { background-color: #3b82f6 !important; }
.bg-amber-600 { background-color: #2563eb !important; }
.bg-amber-900 { background-color: #1e3a8a !important; }

/* Border colors */
.border-orange-200 { border-color: #bfdbfe !important; }
.border-orange-300 { border-color: #93c5fd !important; }
.border-orange-400 { border-color: #60a5fa !important; }
.border-orange-500 { border-color: #3b82f6 !important; }
.border-orange-600 { border-color: #2563eb !important; }

.border-amber-200 { border-color: #bfdbfe !important; }
.border-amber-400 { border-color: #60a5fa !important; }
.border-amber-500 { border-color: #3b82f6 !important; }
.border-fuchsia-400, .border-fuchsia-500 { border-color: #3b82f6 !important; }

/* Hover states */
.hover\:bg-orange-50:hover  { background-color: #eff6ff !important; }
.hover\:bg-orange-100:hover { background-color: #dbeafe !important; }
.hover\:bg-orange-500:hover { background-color: #3b82f6 !important; }
.hover\:bg-orange-600:hover { background-color: #2563eb !important; }
.hover\:bg-orange-700:hover { background-color: #1d4ed8 !important; }
.hover\:text-orange-500:hover { color: #3b82f6 !important; }
.hover\:text-orange-600:hover { color: #2563eb !important; }
.hover\:text-orange-700:hover { color: #1d4ed8 !important; }
.hover\:border-orange-500:hover { border-color: #3b82f6 !important; }
.hover\:border-orange-600:hover { border-color: #2563eb !important; }

/* Focus rings */
.focus\:ring-orange-500:focus { --tw-ring-color: #3b82f6 !important; }
.focus\:border-orange-500:focus { border-color: #3b82f6 !important; }

/* Gradient overrides for buttons and banners */
.from-orange-500 { --tw-gradient-from: #3b82f6 !important; }
.from-orange-600 { --tw-gradient-from: #2563eb !important; }
.to-orange-600   { --tw-gradient-to: #2563eb !important; }
.to-orange-700   { --tw-gradient-to: #1d4ed8 !important; }
.via-orange-500  { --tw-gradient-via: #3b82f6 !important; }

.from-amber-50  { --tw-gradient-from: #eff6ff !important; }
.to-amber-100   { --tw-gradient-to: #dbeafe !important; }
.from-amber-500 { --tw-gradient-from: #3b82f6 !important; }
.from-amber-900 { --tw-gradient-from: #1e3a8a !important; }

/* Checked / selected states for radio + checkbox */
.text-orange-600:checked, input[type="checkbox"].text-orange-600:checked,
input[type="radio"].text-orange-600:checked {
    accent-color: #2563eb !important;
}

/* Ring colors (inputs) */
.ring-orange-500 { --tw-ring-color: #3b82f6 !important; }