#gnpub-gnfollow-shortcode-wrapper a{text-decoration:none;color:#000;border:1px solid #c6d2d9;padding:7px 15px 3px 16px;line-height:1;height:40px;vertical-align:middle;position:absolute}#gnpub-gnfollow-shortcode-wrapper a:focus{box-shadow:none}#gnpub-gnfollow-shortcode-wrapper img{width:120px;position:relative;top:9px;left:5px}#gnpub-gnfollow-shortcode-wrapper a:hover{border:1px solid #000}#gnpub-gnfollow-shortcode-follow-text{font-weight:500;font-size:13px}.sp-quiz-widget {
max-width: 100%;
margin: 2rem 0;
font-family: inherit;
width: 100%;
font-size: inherit;
line-height: inherit;
}
.sp-quiz-container {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
padding: 2rem;
transition: all 0.3s ease;
} .sp-quiz-intro {
text-align: center;
}
.sp-quiz-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
background: #f0f9ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #3398cc;
}
.sp-quiz-title {
font-size: 2.1em;
font-weight: bold;
color: #1f2937;
margin-bottom: 0.5rem;
line-height: 1.2;
text-align: center;
}
.sp-quiz-description {
color: #6b7280;
margin-bottom: 2rem;
font-size: 1.15em;
line-height: 1.6;
} .sp-quiz-btn {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: 6px;
transition: all 0.2s;
border: none;
cursor: pointer;
text-decoration: none;
font-size: 1.1em;
}
.sp-quiz-btn.sp-quiz-btn-navigation {
font-size: 1em;
}
.sp-quiz-btn-primary {
background: #3398cc;
color: white;
}
.sp-quiz-btn-primary:hover {
background: #2980b9;
transform: translateY(-1px);
}
.sp-quiz-btn:disabled {
background: #9ca3af;
color: #6b7280;
cursor: not-allowed;
transform: none;
}
.sp-quiz-btn:disabled:hover {
background: #9ca3af;
transform: none;
} .sp-quiz-header {
margin-bottom: 2rem;
}
.sp-quiz-progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 0.9em;
color: #6b7280;
}
.sp-quiz-progress-bar {
width: 100%;
background: #e5e7eb;
border-radius: 9999px;
height: 8px;
overflow: hidden;
}
.sp-quiz-progress-fill {
height: 100%;
background: #3398cc;
border-radius: 9999px;
transition: width 0.3s ease;
} .sp-quiz-question {
margin-bottom: 2rem;
}
.sp-quiz-question-text {
font-size: 1.6em;
font-weight: 600;
color: #1f2937;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.sp-quiz-choices {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sp-quiz-choice {
width: 100%;
padding: 1rem;
text-align: left;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: #ffffff;
color: #374151;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
font-size: 1em;
line-height: 1.5;
}
.sp-quiz-choice:hover {
border-color: #d1d5db;
background: #f9fafb;
}
.sp-quiz-choice.selected {
border-color: #3398cc;
background: #f0f9ff;
color: #1e40af;
}
.sp-quiz-choice-radio {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 50%;
margin-right: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.sp-quiz-choice.selected .sp-quiz-choice-radio {
border-color: #3398cc;
background: #3398cc;
}
.sp-quiz-choice.selected .sp-quiz-choice-radio::after {
content: '';
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
} .sp-quiz-navigation {
display: flex;
justify-content: flex-end;
margin-top: 2rem;
} .sp-quiz-results {
text-align: center;
}
.sp-quiz-results-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
background: #f0f9ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #3398cc;
}
.sp-quiz-results-title {
font-size: 1.75em;
font-weight: bold;
color: #1f2937;
margin-bottom: 1rem;
line-height: 1.2;
}
.sp-quiz-score {
font-size: 2.5em;
font-weight: bold;
color: #3398cc;
margin-bottom: 0.5rem;
line-height: 1;
}
.sp-quiz-percentage {
font-size: 1.1em;
color: #6b7280;
margin-bottom: 1.5rem;
}
.sp-quiz-result-message-title {
font-size: 1.25em;
font-weight: 600;
margin-bottom: 0.75rem;
line-height: 1.3;
}
.sp-quiz-result-message {
color: #374151;
margin-bottom: 2rem;
line-height: 1.6;
font-size: 1em;
} .sp-result-excellent .sp-quiz-result-message-title {
color: #059669;
}
.sp-result-good .sp-quiz-result-message-title {
color: #3398cc;
}
.sp-result-average .sp-quiz-result-message-title {
color: #374151;
}
.sp-result-poor .sp-quiz-result-message-title {
color: #6b7280;
} .sp-quiz-feedback {
margin-top: 1.5rem;
padding: 1rem;
border-radius: 8px;
animation: fadeIn 0.5s ease-out;
}
.feedback-message.correct {
background: #d1fae5;
border: 1px solid #059669;
color: #065f46;
padding: 1.5rem;
}
.feedback-message.incorrect {
background: #fee2e2;
border: 1px solid #dc2626;
color: #991b1b;
padding: 1.5rem;
}
.feedback-message p {
margin: 10px 0 0 0;
font-style: italic;
font-size: 0.95em;
line-height: 1.5;
}
.feedback-message img {
display: block;
margin: 10px auto 0;
max-width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sp-quiz-choice.correct-answer {
border-color: #059669 !important;
background: #d1fae5 !important;
color: #065f46 !important;
}
.sp-quiz-choice.wrong-answer {
border-color: #dc2626 !important;
background: #fee2e2 !important;
color: #991b1b !important;
}
.sp-quiz-choice:disabled {
cursor: not-allowed;
opacity: 0.8;
} .sp-quiz-loading {
text-align: center;
padding: 2rem;
color: #6b7280;
font-style: italic;
} @media (max-width: 768px) {
.sp-quiz-widget {
margin: 1rem;
}
.sp-quiz-container {
padding: 1.5rem;
}
.sp-quiz-title {
font-size: 1.8em;
}
.sp-quiz-question-text {
font-size: 1.4em;
}
.sp-quiz-score {
font-size: 2em;
}
} @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sp-quiz-container {
animation: fadeIn 0.3s ease-out;
}
.sp-quiz-choice {
animation: fadeIn 0.3s ease-out;
}
.sp-quiz-choice:nth-child(1) { animation-delay: 0.1s; }
.sp-quiz-choice:nth-child(2) { animation-delay: 0.2s; }
.sp-quiz-choice:nth-child(3) { animation-delay: 0.3s; }
.sp-quiz-choice:nth-child(4) { animation-delay: 0.4s; }