@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

.sm-survey {
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 680px;
    margin: 0 auto 40px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 24px rgba(79,70,229,.08);
    overflow: hidden;
}

.sm-survey-header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    padding: 32px 36px;
    color: #fff;
}
.sm-survey-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.sm-survey-desc  { margin: 0; opacity: .85; font-size: 14px; line-height: 1.6; }

.sm-survey-form { padding: 28px 36px; }

/* Question */
.sm-q { margin-bottom: 28px; }
.sm-q-label {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 15px; font-weight: 600; color: #1a1a2e; margin-bottom: 14px; line-height: 1.5;
}
.sm-q-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
    background: #ede9fe; color: #4f46e5; font-size: 12px; font-weight: 700;
}
.sm-required { color: #ef4444; margin-left: 2px; }
.sm-q-input { padding-left: 36px; }

/* Radio / Checkbox */
.sm-radio-label {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 8px;
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    cursor: pointer; transition: all .15s; font-size: 14px; color: #374151;
    user-select: none;
}
.sm-radio-label:hover   { border-color: #a5b4fc; background: #fafafe; }
.sm-radio-label input   { accent-color: #4f46e5; width: 16px; height: 16px; }
.sm-radio-label.sm-selected { border-color: #4f46e5; background: #ede9fe; color: #3730a3; }

/* Select */
.sm-select {
    width: 100%; padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-family: inherit; font-size: 14px; color: #374151;
    appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%236b7280'/%3E%3C/svg%3E") right 14px center no-repeat;
    cursor: pointer; transition: border-color .15s;
}
.sm-select:focus { outline: none; border-color: #4f46e5; }

/* Text inputs */
.sm-text-input, .sm-textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-family: inherit; font-size: 14px; color: #374151; resize: vertical;
    transition: border-color .15s; box-sizing: border-box;
}
.sm-text-input:focus, .sm-textarea:focus { outline: none; border-color: #4f46e5; }

/* Rating */
.sm-rating { display: flex; gap: 6px; }
.sm-star {
    background: none; border: none; font-size: 28px; cursor: pointer;
    color: #d1d5db; transition: color .1s, transform .1s; padding: 0; line-height: 1;
}
.sm-star:hover, .sm-star.sm-active { color: #f59e0b; transform: scale(1.15); }

/* Error */
.sm-error-msg { color: #dc2626; font-size: 13px; margin-bottom: 14px; padding: 10px 14px; background: #fef2f2; border-radius: 8px; }
.sm-q.sm-error .sm-q-label { color: #dc2626; }
.sm-q.sm-error .sm-radio-label, .sm-q.sm-error .sm-text-input,
.sm-q.sm-error .sm-textarea, .sm-q.sm-error .sm-select { border-color: #fca5a5; }

/* Submit */
.sm-submit-btn {
    width: 100%; padding: 14px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: opacity .2s, transform .1s;
}
.sm-submit-btn:hover   { opacity: .93; }
.sm-submit-btn:active  { transform: scale(.99); }
.sm-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Thank you */
.sm-thank-you, .sm-success-state {
    text-align: center; padding: 60px 40px;
}
.sm-ty-icon { font-size: 56px; margin-bottom: 16px; }
.sm-thank-you h3 { font-size: 22px; color: #1a1a2e; margin: 0 0 10px; }
.sm-thank-you p  { color: #6b7280; font-size: 15px; }

.sm-hidden { display: none !important; }