/* HTTP Response Header Checker Styles */

.status-badge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 20px 0;
    text-align: center;
}

.status-2xx { background-color: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.status-3xx { background-color: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.status-4xx { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.status-5xx { background-color: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }

.header-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.header-table th, .header-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.header-table th {
    background-color: #f8fafc;
    font-weight: 600;
    color: var(--primary-color);
    width: 30%;
}

.header-table tr:last-child td {
    border-bottom: none;
}

.header-key {
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 600;
    color: #475569;
}

.header-value {
    font-family: 'Consolas', 'Courier New', monospace;
    word-break: break-all;
    color: #1e293b;
}

.security-headers-box {
    margin-top: 30px;
    padding: 20px;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--radius-md);
}

.security-headers-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0369a1;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.security-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.tag-safe { background-color: #d1fae5; color: #065f46; }
.tag-missing { background-color: #fee2e2; color: #991b1b; }

.url-info {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 10px;
}