/**
 * Wolfini Auto Privacy Protection - Styles
 */

/* Auto-protected elements base styling */
[class^="auto-protected-"] {
    display: inline;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 1px 3px;
    border-radius: 2px;
}

/* Auto-protected email */
.auto-protected-email {
    background-color: rgba(52, 152, 219, 0.1);
    border-bottom: 1px dotted #3498db;
}

.auto-protected-email:hover {
    background-color: rgba(52, 152, 219, 0.2);
}

/* Auto-protected phone */
.auto-protected-phone {
    background-color: rgba(46, 204, 113, 0.1);
    border-bottom: 1px dotted #2ecc71;
}

.auto-protected-phone:hover {
    background-color: rgba(46, 204, 113, 0.2);
}

/* Auto-protected address */
.auto-protected-address {
    background-color: rgba(155, 89, 182, 0.1);
    border-bottom: 1px dotted #9b59b6;
}

.auto-protected-address:hover {
    background-color: rgba(155, 89, 182, 0.2);
}

/* Auto-protected IBAN */
.auto-protected-iban {
    background-color: rgba(230, 126, 34, 0.1);
    border-bottom: 1px dotted #e67e22;
    font-family: monospace;
}

.auto-protected-iban:hover {
    background-color: rgba(230, 126, 34, 0.2);
}

/* Auto-protected bank account */
.auto-protected-account {
    background-color: rgba(192, 57, 43, 0.1);
    border-bottom: 1px dotted #c0392b;
    font-family: monospace;
}

.auto-protected-account:hover {
    background-color: rgba(192, 57, 43, 0.2);
}

/* Fallback styling for JavaScript disabled */
.auto-protected-email:noscript,
.auto-protected-phone:noscript,
.auto-protected-address:noscript,
.auto-protected-iban:noscript,
.auto-protected-account:noscript {
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    font-style: italic;
    color: #999;
    cursor: not-allowed;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .auto-protected-email:noscript,
    .auto-protected-phone:noscript,
    .auto-protected-address:noscript,
    .auto-protected-iban:noscript,
    .auto-protected-account:noscript {
        background-color: #333;
        color: #aaa;
    }
}

/* Accessibility improvements */
[class^="auto-protected-"]:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Print styles - show masked versions */
@media print {
    .auto-protected-iban::after,
    .auto-protected-account::after {
        content: ' (geschützt)';
        color: #999;
        font-size: 0.8em;
    }
}