/* Interactive demo styles */
.demo-container {
    border: 2px solid #dee2e6;
    padding: 20px;
    border-radius: 8px;
    background-color: white;
}

.demo-container [title] {
    border-bottom: 2px dotted #6c757d;
    cursor: help;
}

.demo-container input[type="email"] {
    border: 2px solid #007bff;
    background-color: #e7f3ff;
}

.demo-container [class~="featured"] {
    background-color: #fff3cd;
    font-weight: bold;
    padding: 5px;
    border-radius: 3px;
}

.demo-container a[href^="https://"] {
    color: #28a745;
    font-weight: bold;
}

.demo-container a[href^="https://"]:before {
    content: "🔒 ";
}

.demo-container a[href$=".pdf"] {
    color: #dc3545;
}

.demo-container a[href$=".pdf"]:after {
    content: " 📄";
}

.demo-container [class*="button"] {
    display: inline-block;
    padding: 8px 16px;
    margin: 4px;
    text-decoration: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
}

.demo-container [lang|="en"] {
    font-style: italic;
    background-color: #e8f4f8;
    padding: 3px;
}