/* Custom styles for Blazor app */
html, body {
    font-family: 'Roboto', sans-serif;
}

.mud-appbar {
    backdrop-filter: blur(10px);
}

/* Gradient background for the app bar */
.appbar-gradient {
    background: linear-gradient(90deg, #d4d4d4 0%, #07203a 50%, #d4d4d4 100%);
    color: #e6eef8;
}

/* App logo drop shadow */
#app_logo {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Disable hover raise/animation for Mud components globally */
/* Some MudBlazor defaults apply transform/box-shadow on hover; override them here. */
.mud-paper,
.mud-card,
.mud-elevation-1,
.mud-elevation-2,
.mud-elevation-3,
.mud-elevation-4,
.mud-elevation-6,
.mud-elevation-8,
.mud-button,
.mud-list-item,
.mud-list-item-root,
.mud-paper-root,
.mud-card-root
{
    transition: none !important;
    -webkit-transition: none !important;
}

/* Attention badge — pulsing glow used on the hero tagline */
@keyframes attention-pulse {
    0%, 100% { box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.5), 0 4px 14px rgba(0,0,0,0.25); }
    50%       { box-shadow: 0 0 22px 8px rgba(255, 215, 0, 0.85), 0 6px 20px rgba(0,0,0,0.3); }
}

.attention-badge {
    display: inline-block;
    animation: attention-pulse 2s ease-in-out infinite;
    background: linear-gradient(135deg, #e63946 0%, #c1121f 60%, #780000 100%);
    color: #fff;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 11px 26px;
    border-radius: 12px;
    border: 2px solid #FFD700;
    max-width: 320px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.45);
    margin: 10px 0;
    cursor: default;
    user-select: none;
}

/* Neon terminal variant */
@keyframes neon-glow {
    0%, 100% {
        text-shadow: 0 0 4px #00e5ff, 0 0 10px #00e5ff, 0 0 18px #00b8d4;
        box-shadow:  0 0 8px  rgba(0,229,255,0.5), inset 0 0 8px  rgba(0,229,255,0.08);
    }
    50% {
        text-shadow: 0 0 8px #00e5ff, 0 0 22px #00e5ff, 0 0 36px #00b8d4;
        box-shadow:  0 0 20px rgba(0,229,255,0.8), inset 0 0 14px rgba(0,229,255,0.15);
    }
}

.attention-badge-v2 {
    display: inline-block;
    background: #080e1a;
    color: #00e5ff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding: 10px 22px;
    border-radius: 5px;
    border: 1px solid rgba(0,229,255,0.7);
    animation: neon-glow 2.5s ease-in-out infinite;
    margin: 10px 0;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

/* Borderless metallic shimmer sweep */
@keyframes text-shimmer {
    0%   { background-position: -250% center; }
    100% { background-position: 250% center; }
}

.attention-text-v3 {
    display: inline;
    background: linear-gradient(
        90deg,
        #999  0%,
        #fff  28%,
        #ffd700 42%,
        #fff  56%,
        #999  100%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: text-shimmer 3.5s linear infinite;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    cursor: default;
    user-select: none;
}

/* Animated gradient underline — no box, no fill */
@keyframes underline-grow {
    0%        { background-size:   0% 3px; opacity: 0.4; }
    50%       { background-size: 100% 3px; opacity: 1;   }
    100%      { background-size:   0% 3px; opacity: 0.4; }
}

.attention-text-v4 {
    display: inline;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-image: linear-gradient(90deg, #1976d2, #9c27b0, #e91e63);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 3px;
    animation: underline-grow 2.4s ease-in-out infinite;
    padding-bottom: 3px;
    cursor: default;
    user-select: none;
}

/* Typewriter with blinking caret */
@keyframes typing {
    from { max-width: 0; }
    to   { max-width: 34ch; }
}
@keyframes blink-caret {
    0%, 100% { border-color: transparent; }
    50%      { border-color: #1976d2; }
}

.attention-text-v5 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    border-right: 2px solid #1976d2;
    animation:
        typing      2.8s steps(31, end) 0.4s forwards,
        blink-caret 0.8s step-end      infinite;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    cursor: default;
    user-select: none;
}

/* Glitch — RGB channel split fires briefly every ~4 s */
@keyframes glitch-shift {
    0%,  88%, 100% {
        text-shadow: none;
        transform: translate(0, 0);
        opacity: 1;
    }
    90% {
        text-shadow: -3px 0 #ff0080, 3px 0 #00ffff;
        transform: translate(-2px, 0);
        opacity: 0.9;
    }
    92% {
        text-shadow:  3px 0 #ff0080, -3px 0 #00ffff;
        transform: translate( 2px, 0);
        opacity: 0.9;
    }
    94% {
        text-shadow: -1px 0 #ff0080,  1px 0 #00ffff;
        transform: translate(-1px, 1px);
    }
    96% {
        text-shadow: none;
        transform: translate(0, 0);
        opacity: 1;
    }
}

.attention-text-v6 {
    display: inline;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    animation: glitch-shift 4s ease-in-out infinite;
    cursor: default;
    user-select: none;
}

/* Aurora gradient text pulse */
@keyframes aurora-shift {
    0%   { background-position: 0% 50%; filter: saturate(95%); }
    50%  { background-position: 100% 50%; filter: saturate(130%); }
    100% { background-position: 0% 50%; filter: saturate(95%); }
}

.attention-text-v7 {
    display: inline;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    background: linear-gradient(90deg, #00c2ff, #7a5cff, #ff4fa3, #00c2ff);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: aurora-shift 3.2s ease-in-out infinite;
    cursor: default;
    user-select: none;
}

/* Focus pulse text (sharp <-> soft) */
@keyframes focus-pulse {
    0%, 100% {
        opacity: 0.88;
        filter: blur(0.35px);
        letter-spacing: 0.08em;
        text-shadow: 0 0 0 rgba(0,0,0,0);
    }
    50% {
        opacity: 1;
        filter: blur(0);
        letter-spacing: 0.14em;
        text-shadow: 0 0 10px rgba(103, 80, 164, 0.35);
    }
}

.attention-text-v8 {
    display: inline;
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #6a4fd3;
    animation: focus-pulse 2.6s ease-in-out infinite;
    cursor: default;
    user-select: none;
}

/* Ensure hover does not move or change elevation */
.mud-paper:hover,
.mud-card:hover,
.mud-button:hover,
.mud-list-item:hover
{
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
}

/* Code block styling */
pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mud-container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Pricing block background */
.pricing-block {
    /* Lighter dark gradient for the pricing block */
    background: linear-gradient(135deg, rgba(28,41,65,0.75) 0%, rgba(54,85,120,0.70) 100%);
/*    background: linear-gradient(135deg, rgba(28,41,65,0.5) 0%, rgba(54,85,120,0.6) 100%);*/
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(2,6,23,0.15);
    color: #ffff
    
}

.pricing-block .mud-stack, .pricing-block .mud-grid {
    /* ensure inner spacing matches existing layout */
    margin: 0;
}

.pricing-block a, .pricing-block .mud-text, .pricing-block .mud-button {
    color: #e6eef8;
}

/* ========================================
   MudTextField Label Fix - Prevent Label Overlap
   ======================================== */

/* OUTLINED VARIANT - Most common and recommended */
.mud-input-outlined .mud-input-slot input {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.mud-input-outlined .mud-input-slot textarea {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Ensure floating label has white background to not overlap border */
.mud-input-outlined .mud-input-label-animated.mud-shrink {
    background-color: white;
    padding-left: 4px;
    padding-right: 4px;
}

/* Dark theme label background */
.mud-theme-dark .mud-input-outlined .mud-input-label-animated.mud-shrink {
    background-color: #1e1e1e;
}

/* FILLED VARIANT */
.mud-input-filled .mud-input-slot input {
    padding-top: 27px !important;
}

.mud-input-filled .mud-input-slot textarea {
    padding-top: 27px !important;
}

/* TEXT/STANDARD VARIANT */
.mud-input-standard .mud-input-slot input {
    padding-top: 20px !important;
}

.mud-input-standard .mud-input-slot textarea {
    padding-top: 20px !important;
}

/* Ensure label transformation is smooth and doesn't overlap */
.mud-input-label-animated {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shrunk label position - keep it above content */
.mud-input-label.mud-shrink {
    transform: translate(0px, -9px) scale(0.75) !important;
}

/* For outlined, adjust shrink position */
.mud-input-outlined .mud-input-label.mud-shrink {
    transform: translate(14px, -9px) scale(0.75) !important;
}