/* Essential Blazor Error Boundary - Cannot be replaced with Tailwind easily */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI6NjMuNTc2IDg2LjA1NDdaIiBmaWxsPSIjRkZFNTAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Global fix for unwanted focus outlines on non-interactive elements */
/* This prevents the black border issue on page titles during Blazor app startup */
div:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
span:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
p:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h1:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h2:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h3:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h4:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h5:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h6:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]) {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure focus styles are completely removed for title elements during page load */
.text-3xl:focus,
.text-2xl:focus,
.text-xl:focus,
.font-bold:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

/* Prevent any element from showing unwanted focus styles unless it's interactive */
*:not(input):not(button):not(a):not(select):not(textarea):not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]) {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

*:not(input):not(button):not(a):not(select):not(textarea):not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]):focus {
    outline: none !important;
    box-shadow: none !important;
    border: inherit !important;
}

/* Dashboard Hero Header Styles */
/* Hero header subtle animated background */
.hero-header { 
    position: relative; 
}

/* Rotating blended layer for visible motion */
.hero-header::before {
    content: ""; 
    position: absolute; 
    inset: -20%; 
    z-index: 1; 
    pointer-events: none;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,.14), transparent 55%),
                radial-gradient(circle at 60% 10%, rgba(255,255,255,.10), transparent 60%);
    mix-blend-mode: overlay; 
    opacity: .45; 
    filter: blur(6px);
    animation: rotateBg 60s linear infinite;
}

.hero-gradient-shift { 
    background: linear-gradient(120deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03), rgba(255,255,255,0.10)); 
    background-size: 200% 200%; 
    animation: heroGradientShift 24s ease-in-out infinite; 
    opacity: 0.5; 
}

.hero-orb { 
    position: absolute; 
    border-radius: 9999px; 
    filter: blur(18px); 
    opacity: 0.5; 
    will-change: transform; 
}

.hero-orb.orb-1 { 
    width: 240px; 
    height: 240px; 
    top: -60px; 
    left: -60px; 
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); 
    animation: float1 26s ease-in-out infinite; 
}

.hero-orb.orb-2 { 
    width: 180px; 
    height: 180px; 
    bottom: -40px; 
    right: 12%; 
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%); 
    animation: float2 30s ease-in-out infinite; 
}

.hero-orb.orb-3 { 
    width: 140px; 
    height: 140px; 
    top: 12%; 
    right: -30px; 
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); 
    animation: float3 22s ease-in-out infinite; 
}

/* Dashboard Hero Header Animations */
@keyframes heroGradientShift { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

@keyframes rotateBg { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

@keyframes float1 { 
    0% { transform: translate(0,0) scale(1); } 
    50% { transform: translate(36px, 20px) scale(1.04); } 
    100% { transform: translate(0,0) scale(1); } 
}

@keyframes float2 { 
    0% { transform: translate(0,0) scale(1); } 
    50% { transform: translate(-28px, -14px) scale(1.06); } 
    100% { transform: translate(0,0) scale(1); } 
}

@keyframes float3 { 
    0% { transform: translate(0,0) scale(1); } 
    50% { transform: translate(-12px, 22px) scale(1.03); } 
    100% { transform: translate(0,0) scale(1); } 
}

/* Order Complete Button Enhanced Styling */
.order-complete-button {
    position: relative;
    overflow: hidden;
}

.order-complete-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
}

.order-complete-button:not(:disabled):active {
    transform: translateY(0);
}

.order-complete-button:disabled {
    background: linear-gradient(to right, #9CA3AF, #6B7280) !important;
    cursor: not-allowed;
}

/* Order Module Selection Cards Enhanced Styling */
.module-selection-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.module-selection-card:hover:not(.disabled) {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.module-selection-card.selected {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.02);
}

.module-selection-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pricing Summary Enhanced Styling */
.pricing-summary {
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.8) 0%, rgba(243, 244, 246, 0.9) 100%);
    backdrop-filter: blur(10px);
}

.discount-badge {
    animation: slideInFromLeft 0.5s ease-out;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-header::before, .hero-gradient-shift, .hero-orb { 
        animation: none !important; 
    }
    
    .order-complete-button:not(:disabled):hover {
        transform: none;
    }
    
    .module-selection-card:hover:not(.disabled) {
        transform: none;
    }
    
    .discount-badge {
        animation: none;
    }
}