/* ══════════════════════════════════════════════════════════════════
   SURVEY MODULE — Radim Branding v1.0
   ══════════════════════════════════════════════════════════════════ */

#module-survey { color: #2d3748; background: #f8fafa; }

.sv-module { padding: 12px; max-width: 700px; margin: 0 auto; }

.sv-rewards {
    background: linear-gradient(135deg, #5BA8A0 0%, #4A9690 100%);
    color: white; border-radius: 16px; padding: 16px 20px;
    margin-bottom: 20px; display: flex; align-items: center;
    justify-content: space-between; box-shadow: 0 4px 12px rgba(91,168,160,0.3);
}
.sv-reward-item { text-align: center; }
.sv-points { font-size: 1.5rem; font-weight: 700; }
.sv-label { font-size: 0.85rem; opacity: 0.8; }

.sv-card {
    background: white; border: 2px solid #e2e8f0; border-radius: 16px;
    padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sv-loading { text-align: center; color: #a0aec0; padding: 20px; }

.sv-question {}
.sv-q-header { text-align: center; margin-bottom: 12px; }
.sv-q-header h3 { color: #2d3748; font-size: 1.2rem; margin: 0 0 4px; }
.sv-q-progress { color: #5BA8A0; font-size: 0.85rem; font-weight: 600; }
.sv-q-progress-bar { height: 4px; background: #e2e8f0; border-radius: 4px; margin-bottom: 20px; }
.sv-q-progress-fill { height: 100%; background: #5BA8A0; border-radius: 4px; transition: width 0.3s; }
.sv-q-text { text-align: center; color: #2d3748; font-size: 1.15rem; margin-bottom: 20px; line-height: 1.5; }

.sv-emoji-grid {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.sv-emoji-btn {
    padding: 14px 18px; border: 2px solid #e2e8f0; border-radius: 14px;
    background: white; cursor: pointer; font-size: 1.05rem; min-width: 90px;
    transition: all 0.2s; color: #2d3748;
}
.sv-emoji-btn:hover { border-color: #5BA8A0; background: #f0fdfa; transform: translateY(-2px); }

.sv-replay-btn {
    display: block; margin: 0 auto 16px; padding: 8px 16px;
    background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    color: #5BA8A0; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.sv-replay-btn:hover { background: #e6fffa; border-color: #5BA8A0; }

.sv-yesno { display: flex; gap: 16px; justify-content: center; }
.sv-btn {
    padding: 16px 32px; border-radius: 14px; font-size: 1.1rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s; border: 2px solid;
    color: #2d3748;
}
.sv-btn-yes { border-color: #48bb78; background: #f0fff4; }
.sv-btn-yes:hover { background: #c6f6d5; }
.sv-btn-no { border-color: #fc8181; background: #fff5f5; }
.sv-btn-no:hover { background: #fed7d7; }
.sv-btn-submit {
    width: 100%; margin-top: 12px; padding: 14px; border: none;
    border-radius: 12px; background: #5BA8A0; color: white;
    font-size: 1rem; font-weight: 600; cursor: pointer;
}
.sv-btn-submit:hover { background: #4A9690; }

.sv-input {
    width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0;
    border-radius: 12px; font-size: 1rem; box-sizing: border-box;
    color: #2d3748;
}
.sv-input:focus { border-color: #5BA8A0; outline: none; }

.sv-answered-count { text-align: center; color: #a0aec0; font-size: 0.8rem; margin-top: 12px; }

.sv-success { text-align: center; padding: 24px; }
.sv-success-icon { font-size: 3rem; margin-bottom: 12px; }
.sv-success h3 { color: #2d3748; }
.sv-success-stats { color: #5BA8A0; font-weight: 600; margin-top: 8px; }

.sv-new-badges {
    margin-top: 16px; padding: 12px; background: #fefcbf;
    border-radius: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.sv-badge-new { font-size: 1.1rem; font-weight: 600; color: #975a16; }

.sv-history { margin-top: 16px; }
.sv-history h3 { color: #2d3748; margin-bottom: 12px; font-size: 1rem; }
.sv-history-list { display: flex; flex-direction: column; gap: 8px; }
.sv-history-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: white; border-radius: 12px; border: 1px solid #e2e8f0;
    font-size: 0.9rem;
}
.sv-history-icon { font-size: 1.2rem; }
.sv-history-name { flex: 1; color: #2d3748; font-weight: 600; text-transform: capitalize; }
.sv-history-pts { color: #5BA8A0; font-weight: 600; font-size: 0.85rem; }
.sv-history-date { color: #a0aec0; font-size: 0.8rem; }

@media (max-width: 480px) {
    .sv-rewards { flex-direction: column; gap: 8px; text-align: center; }
    .sv-emoji-grid { gap: 6px; }
    .sv-emoji-btn { min-width: 70px; padding: 10px 12px; font-size: 0.95rem; }
    .sv-yesno { gap: 10px; }
    .sv-btn { padding: 12px 20px; font-size: 1rem; }
}