/**
 * Frontend Styles for Typing Effect Manager
 */

/* Main typing text */
.tem-typing-text {
    display: inline-block;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

/* Prefix and Suffix */
.tem-prefix,
.tem-suffix {
    color: inherit;
}

/* Cursor styling */
.tem-typing-text .typed-cursor {
    color: inherit;
    font-weight: inherit;
    animation: tem-blink 0.7s infinite;
}

@keyframes tem-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Optional: Gradient text effect (add class="tem-gradient" to shortcode) */
.tem-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tem-gradient .typed-cursor {
    -webkit-text-fill-color: #667eea;
}

/* Optional: Neon effect (add class="tem-neon" to shortcode) */
.tem-neon {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
}

/* Optional: Terminal theme (add class="tem-terminal" to shortcode) */
.tem-terminal-wrapper {
    background: #1e1e1e;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    padding: 20px;
    border-radius: 8px;
}

.tem-terminal-header {
    background: #2b2b2b;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    margin: -20px -20px 15px;
    color: #ccc;
    font-size: 14px;
}

/* Error message */
.tem-error {
    color: #d63638;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tem-typing-text {
        font-size: 0.9em;
    }
}