/* Webshop Trust Checker v2.0 */

.wtc-container {
    max-width: 800px;
    margin: 2rem auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a2e;
}
.wtc-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.25rem; color: #1a1a2e; }
.wtc-subtitle { color: #64748b; margin-bottom: 1.5rem; font-size: 1rem; }

/* Form */
.wtc-form-wrapper { margin-bottom: 2rem; }
.wtc-input-group { display: flex; gap: 0.5rem; }
.wtc-input {
    flex: 1; padding: 0.75rem 1rem; border: 2px solid #e2e8f0;
    border-radius: 10px; font-size: 1rem; transition: border-color 0.2s; outline: none;
}
.wtc-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.wtc-button {
    padding: 0.75rem 1.5rem; background: #6366f1; color: white; border: none;
    border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem;
}
.wtc-button:hover { background: #4f46e5; }
.wtc-button:disabled { background: #94a3b8; cursor: not-allowed; }
.wtc-btn-loading { display: flex; align-items: center; gap: 0.5rem; }
.wtc-spinner { animation: wtc-spin 1s linear infinite; }
@keyframes wtc-spin { to { transform: rotate(360deg); } }
.wtc-error { color: #dc2626; margin-top: 0.5rem; font-size: 0.9rem; }

/* Progress */
.wtc-progress {
    background: #f8fafc; border-radius: 12px; padding: 1.5rem;
    margin-bottom: 2rem; border: 1px solid #e2e8f0;
}
.wtc-progress-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.wtc-progress-fill {
    height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px; width: 0%; transition: width 0.5s ease;
}
.wtc-progress-text { font-weight: 600; margin-bottom: 0.75rem; color: #475569; }
.wtc-progress-steps { display: flex; flex-direction: column; gap: 0.4rem; }
.wtc-step { font-size: 0.85rem; color: #94a3b8; transition: color 0.3s; }
.wtc-step.active { color: #6366f1; font-weight: 600; }
.wtc-step.done { color: #22c55e; }

/* Score Header */
.wtc-score-header {
    display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem;
    background: #f8fafc; border-radius: 16px; margin-bottom: 1.5rem; border: 1px solid #e2e8f0;
}
.wtc-score-circle {
    width: 100px; height: 100px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
}
.wtc-score-circle.wtc-score-high { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border: 3px solid #22c55e; }
.wtc-score-circle.wtc-score-medium { background: linear-gradient(135deg, #fef9c3, #fde68a); border: 3px solid #eab308; }
.wtc-score-circle.wtc-score-low { background: linear-gradient(135deg, #fee2e2, #fecaca); border: 3px solid #ef4444; }
.wtc-score-number { font-size: 2rem; font-weight: 800; line-height: 1; }
.wtc-score-high .wtc-score-number { color: #16a34a; }
.wtc-score-medium .wtc-score-number { color: #ca8a04; }
.wtc-score-low .wtc-score-number { color: #dc2626; }
.wtc-score-label { font-size: 0.85rem; color: #64748b; font-weight: 600; }
.wtc-score-summary h3 { font-size: 1.3rem; margin: 0 0 0.25rem 0; }
.wtc-verdict { font-size: 1.1rem; font-weight: 700; margin: 0.25rem 0; }
.wtc-verdict-good { color: #16a34a; }
.wtc-verdict-caution { color: #ca8a04; }
.wtc-verdict-bad { color: #dc2626; }
.wtc-score-explanation { color: #475569; font-size: 0.95rem; margin: 0.25rem 0 0 0; }

/* Analysis Grid */
.wtc-analysis-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .wtc-analysis-grid { grid-template-columns: 1fr 1fr; } }
.wtc-analysis-card {
    background: white; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; transition: box-shadow 0.2s;
}
.wtc-analysis-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.wtc-card-header {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.wtc-card-icon { font-size: 1.2rem; }
.wtc-card-header h4 { flex: 1; margin: 0; font-size: 0.95rem; font-weight: 600; }
.wtc-card-badge {
    font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem;
    border-radius: 20px; white-space: nowrap;
}
.wtc-badge-good { background: #dcfce7; color: #16a34a; }
.wtc-badge-warning { background: #fef9c3; color: #ca8a04; }
.wtc-badge-bad { background: #fee2e2; color: #dc2626; }
.wtc-card-body { padding: 0.75rem 1rem; }
.wtc-card-body p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #475569; }

/* Flags */
.wtc-flags-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 639px) { .wtc-flags-section { grid-template-columns: 1fr; } }
.wtc-green-flags, .wtc-red-flags { padding: 1rem; border-radius: 12px; }
.wtc-green-flags { background: #f0fdf4; border: 1px solid #bbf7d0; }
.wtc-red-flags { background: #fef2f2; border: 1px solid #fecaca; }
.wtc-green-flags h4 { color: #16a34a; margin: 0 0 0.5rem 0; font-size: 0.95rem; }
.wtc-red-flags h4 { color: #dc2626; margin: 0 0 0.5rem 0; font-size: 0.95rem; }
.wtc-green-flags ul, .wtc-red-flags ul { margin: 0; padding-left: 1.25rem; }
.wtc-green-flags li, .wtc-red-flags li { font-size: 0.9rem; margin-bottom: 0.3rem; line-height: 1.4; color: #374151; }

/* Recommendation */
.wtc-recommendation {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff); border: 1px solid #c7d2fe;
    border-radius: 12px; padding: 1.25rem;
}
.wtc-recommendation p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #312e81; font-weight: 500; }

/* Responsive */
@media (max-width: 480px) {
    .wtc-input-group { flex-direction: column; }
    .wtc-score-header { flex-direction: column; text-align: center; }
}