/**
 * Styles for the SEO Debug page
 */

/* Common panel styling */
.easyaibloggen-panel {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
}

/* Success panel */
.easyaibloggen-panel-success {
    margin: 20px 0;
    padding: 15px;
    background: #e9f7e9;
    border: 1px solid #4CAF50;
}

/* Info panel */
.easyaibloggen-panel-info {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 4px solid #00a0d2;
}

/* Warning panel */
.easyaibloggen-panel-warning {
    margin: 20px 0;
    padding: 15px;
    background: #ffe8e8;
    border: 1px solid #ff6b6b;
}

/* Error panel */
.easyaibloggen-panel-error {
    margin: 20px 0;
    padding: 15px;
    background: #ffeeee;
    border: 1px solid #ff0000;
}

/* Primary panel */
.easyaibloggen-panel-primary {
    margin: 20px 0;
    padding: 15px;
    background: #e8f4ff;
    border: 1px solid #4c6ef5;
}

/* Instructions panel */
.easyaibloggen-instructions {
    margin-bottom: 15px;
    padding: 10px;
    background: #e7f7e3;
    border-left: 4px solid #46b450;
}

/* Useful panel styles */
.easyaibloggen-panel-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f1f1f1;
    border-left: 4px solid #46b450;
}

.easyaibloggen-debug-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 4px solid #dc3232;
}

/* Debug elements */
.easyaibloggen-debug-output {
    display: none;
    margin-top: 15px;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    font-family: monospace;
    font-size: 12px;
}

.easyaibloggen-raw-output {
    display: none;
    margin-top: 15px;
    padding: 10px;
    background: #f8f0f0;
    border: 1px solid #ddd;
    overflow: auto;
    max-height: 200px;
    font-family: monospace;
    font-size: 11px;
}

.easyaibloggen-loading {
    display: none;
    margin-top: 10px;
}

.easyaibloggen-results {
    display: none;
    margin-top: 15px;
}

/* Code display */
.easyaibloggen-code {
    max-height: 300px;
    overflow: auto;
    background: #f0f0f0;
    padding: 10px;
    font-size: 12px;
}

/* Result display */
.easyaibloggen-result {
    margin-top: 10px;
    font-family: monospace;
}

.easyaibloggen-result-detailed {
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    font-family: monospace;
    max-height: 200px;
    overflow: auto;
}