/* SSL Checker Specific Styles */
.input-row {
  display: flex;
  gap: var(--spacing-sm);
}

.input-row .form-input { flex: 1; }

.ssl-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  background: var(--color-bg-input);
}

.ssl-status.valid { background: rgba(16, 185, 129, 0.1); border: 1px solid var(--color-success); }
.ssl-status.valid .status-icon { color: var(--color-success); }
.ssl-status.warning { background: rgba(245, 158, 11, 0.1); border: 1px solid var(--color-warning); }
.ssl-status.warning .status-icon { color: var(--color-warning); }
.ssl-status.invalid { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--color-error); }
.ssl-status.invalid .status-icon { color: var(--color-error); }

.status-icon { flex-shrink: 0; }
.status-text h3 { margin-bottom: var(--spacing-xs); }
.status-text p { color: var(--color-text-secondary); margin: 0; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.detail-item {
  background: var(--color-bg-input);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
}

.detail-label { display: block; font-size: 0.75rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); }
.detail-value { font-family: var(--font-mono); color: var(--color-primary); font-size: 0.9rem; word-break: break-all; }

.check-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-sm);
}

.check-item.pass { background: rgba(16, 185, 129, 0.05); }
.check-item.fail { background: rgba(239, 68, 68, 0.05); }
.check-item.pass .check-icon { color: var(--color-success); }
.check-item.fail .check-icon { color: var(--color-error); }

.check-icon { font-size: 1.25rem; font-weight: bold; }
.check-title { display: block; font-weight: 600; }
.check-desc { font-size: 0.875rem; color: var(--color-text-secondary); }

@media (max-width: 600px) {
  .input-row { flex-direction: column; }
  .ssl-status { flex-direction: column; text-align: center; }
}