:root {
    --wqp-primary:      #7f7f7f; /* ciemno szary */
    --wqp-primary-dark: #323232; /* ciemno niebieski */
    --wqp-success:      #22c55e; /* zielony */
    --wqp-error:        #ef4444; /* czerwony */
    --wqp-border:       #e2e8f0; /* lekko niebieski */
    --wqp-bg:           #f8fafc; /* szary */
}

/* Brak ramki, brak tła, brak padding – quiz wtapia się w stronę */
.wqp-quiz-wrapper {
    font-family: inherit;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Sonda zachowuje delikatne wyróżnienie */
.wqp-poll-wrapper {
    font-family: inherit;
    max-width: 100%;
    margin: 1.5rem 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Tytuł – tylko sonda (quiz nie wyświetla tytułu) */
.wqp-poll-wrapper .wqp-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    padding: 0;
}

/* Pytanie */
.wqp-question {
    padding: 1rem 0;
    border-bottom: 1px solid var(--wqp-border);
}

.wqp-question:last-of-type {
    border-bottom: none;
}

.wqp-question-text {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .75rem;
    line-height: 1.5;
}

.wqp-q-num {
    color: var(--wqp-primary);
    margin-right: .25rem;
}

/* Obrazek pytania */
.wqp-question-image {
    margin-bottom: .875rem;
}

.wqp-question-image img {
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 8px;
    display: block;
    border: 1px solid var(--wqp-border);
}

/* Odpowiedzi */
.wqp-answers {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.wqp-answer-label {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .875rem;
    background: transparent;
    border: 1px solid rgba(121, 121, 121, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.wqp-answer-label:hover {
    border-color: var(--wqp-primary);
    background: rgba(239, 246, 255, 0.1);
}

.wqp-answer-label input[type="radio"],
.wqp-answer-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--wqp-primary);
    flex-shrink: 0;
    cursor: pointer;
}

/* Stany po sprawdzeniu */
.wqp-answer-label.wqp-correct {
    border-color: var(--wqp-success);
    background: #f0fdf4;
	color: #2a2a2a;
}

.wqp-answer-label.wqp-wrong {
    border-color: var(--wqp-error);
    background: #fef2f2;
	color: #2a2a2a;
}

.wqp-answer-label.wqp-missed {
    border-color: var(--wqp-success);
    background: #f0fdf4;
    opacity: .65;
	color: #2a2a2a;
}

/* Feedback pod pytaniem */
.wqp-feedback {
    margin-top: .45rem;
    font-size: .875rem;
    font-weight: 600;
    min-height: 1.2em;
}

.wqp-feedback.correct { color: #16a34a; }
.wqp-feedback.wrong   { color: var(--wqp-error); }

/* Przycisk */
.wqp-quiz-footer {
    padding: 1.25rem 0 .5rem;
}

.wqp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem;
    border: none;
	width: 100%;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    line-height: 1;
}

.wqp-btn:active { transform: scale(.97); }

.wqp-btn-primary {
    background: var(--wqp-primary);
    color: #fff;
}

.wqp-btn-primary:hover    { background: var(--wqp-primary-dark); color: #fff; }
.wqp-btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }

/* Box z wynikiem końcowym */
.wqp-result-box {
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    border: 1px solid;
    text-align: center;
}

.wqp-result-box.pass {
    border-color: var(--wqp-success);
    background: #f0fdf4;
    color: #166534;
}

.wqp-result-box.fail {
    border-color: var(--wqp-error);
    background: #fef2f2;
    color: #991b1b;
}

.wqp-result-score {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    display: block;
    margin-bottom: .4rem;
}

.wqp-result-message {
    font-size: 1rem;
    font-weight: 500;
    display: block;
}

/* ── Sonda ── */
.wqp-poll-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .75rem;
}

.wqp-poll-option-label {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .875rem;
    background: var(--wqp-bg);
    border: 1px solid var(--wqp-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.wqp-poll-option-label:hover {
    border-color: var(--wqp-primary);
    background: #eff6ff;
}

.wqp-poll-option-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--wqp-primary);
    flex-shrink: 0;
    cursor: pointer;
}

.wqp-poll-wrapper form {
    padding: 0;
}

.wqp-poll-wrapper form > div:last-child {
    padding: .75rem 0 0;
}

.wqp-poll-results,
.wqp-poll-result-container {
    padding: .5rem 0 0;
}

.wqp-poll-result-row    { margin-bottom: .875rem; }

.wqp-poll-result-label  {
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.wqp-poll-bar-track {
    background: var(--wqp-bg);
    border: 1px solid var(--wqp-border);
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
}

.wqp-poll-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wqp-primary), #60a5fa);
    border-radius: 999px;
    transition: width .8s ease;
    min-width: 0;
}

.wqp-poll-meta   { font-size: .8rem; color: #64748b; margin-top: .25rem; text-align: right; }
.wqp-total-votes { font-size: .85rem; color: #64748b; text-align: right; margin: .5rem 0 0; }

/* Komunikaty */
.wqp-notice,
.wqp-already-done { font-size: .95rem; color: #475569; padding: .5rem 0; }
.wqp-already-done { color: #166534; }
.wqp-error        { color: var(--wqp-error); }


/* Responsywność */
@media (max-width: 600px) {
    .wqp-question       { padding: .75rem 0; }
    .wqp-quiz-footer    { padding: 1rem 0 .25rem; }
    .wqp-result-box     { margin: .75rem 0; padding: 1rem; }
    .wqp-result-score   { font-size: 2rem; }
    .wqp-btn            { width: 100%; }
    .wqp-question-image img { max-width: 100%; }
}