/* Contact page specific styles */

.status-message {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: var(--radius, 2px);
    font-size: 14px;
    font-family: var(--font-mono, monospace);
    display: none;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-message.success {
    background: rgba(27, 127, 77, 0.08);
    color: var(--ok, #1B7F4D);
    border: 1px solid var(--ok, #1B7F4D);
    display: block;
}

.status-message.error {
    background: rgba(179, 54, 43, 0.08);
    color: var(--fail, #B3362B);
    border: 1px solid var(--fail, #B3362B);
    display: block;
}

.status-message.info {
    background: rgba(46, 100, 166, 0.08);
    color: var(--steel, #2E64A6);
    border: 1px solid var(--steel, #2E64A6);
    display: block;
}

.security-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 10px;
    background: var(--vellum, #EDF0F2);
    border: 1px solid var(--line, #C8D1D9);
    border-radius: var(--radius, 2px);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-60, #4A5868);
}

.security-badge svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    fill: var(--ok, #1B7F4D);
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}