/**
 * SpamProtection.css - Styles for Spam Protection Library
 * 
 * Includes styles for honeypot hiding and optional visual feedback elements.
 */

/* ==================== HONEYPOT HIDING ==================== */

/**
 * Multiple techniques used to hide honeypot from humans while
 * keeping it "visible" to bots that scan the DOM.
 */

/* Main container - completely hidden from view */
.sp-honeypot-container {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    
    /* Prevent focus outline from revealing position */
    outline: none !important;
    
    /* Screen reader accessible hiding */
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Honeypot input field */
.sp-honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    
    /* Prevent tabbing to field */
    tab-index: -1 !important;
}

/* Honeypot label */
.sp-honeypot-label {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Alternative CSS-only honeypot trap */
.sp-trap-field {
    display: none !important;
    visibility: hidden !important;
}

/* ==================== VISUAL FEEDBACK (OPTIONAL) ==================== */

/**
 * Optional progress/status indicator for users.
 * Enable by adding class 'sp-show-status' to your form.
 */

/* Status container */
.sp-status {
    display: none;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Show status when form has the show class */
form.sp-show-status .sp-status {
    display: block;
}

/* Status states */
.sp-status--checking {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.sp-status--success {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}

.sp-status--error {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

/* Status icon */
.sp-status::before {
    margin-right: 8px;
    font-weight: bold;
}

.sp-status--checking::before {
    content: "⏳";
}

.sp-status--success::before {
    content: "✓";
}

.sp-status--error::before {
    content: "✕";
}

/* ==================== LOADING OVERLAY (OPTIONAL) ==================== */

.sp-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sp-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sp-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: sp-spin 1s linear infinite;
}

@keyframes sp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==================== ACCESSIBLE HIDING UTILITIES ==================== */

/* Visually hide but keep accessible to screen readers */
.sp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide completely including from screen readers */
.sp-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* ==================== DARK MODE SUPPORT ==================== */

@media (prefers-color-scheme: dark) {
    .sp-status--checking {
        background-color: #332701;
        border-color: #ffc107;
        color: #ffc107;
    }
    
    .sp-status--success {
        background-color: #0d3318;
        border-color: #28a745;
        color: #7dcea0;
    }
    
    .sp-status--error {
        background-color: #3d1319;
        border-color: #dc3545;
        color: #f5b7b1;
    }
    
    .sp-loading-overlay {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* ==================== PRINT STYLES ==================== */

@media print {
    .sp-honeypot-container,
    .sp-honeypot-field,
    .sp-honeypot-label,
    .sp-status,
    .sp-loading-overlay {
        display: none !important;
    }
}