/* Self-contained fonts: only the faces the quiz uses, under Quiz-namespaced
   family names so nothing can collide with the host page. We intentionally do
   NOT @import the shared fonts.css bundle -- it globally re-registers an
   'icomoon' @font-face that clobbers the host site's own icon font. */
@font-face {
    font-family: 'QuizTaz';
    src: local('TazWt05-Regular'),
         url('https://24sata.tech/assets/24sata/fonts/TazWt05-Regular.woff2') format('woff2'),
         url('https://24sata.tech/assets/24sata/fonts/TazWt05-Regular.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'QuizTazBold';
    src: local('TazWt07-Bold'),
         url('https://24sata.tech/assets/24sata/fonts/TazWt07-Bold.woff2') format('woff2'),
         url('https://24sata.tech/assets/24sata/fonts/TazWt07-Bold.woff') format('woff');
    font-display: swap;
}

/* ---- design tokens (1:1 with the 640px Sketch artboard) ---- */
.WQuizApp2 {
    --blue: #297af6;
    --blue-soft: rgba(41, 122, 246, .25);
    --blue-hover: rgba(41, 122, 246, .6);
    --green: #40b14d;
    --ink: #333333;
    --bodyfont: 'QuizTaz', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --headfont: 'QuizTazBold', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

[v-cloak] {
    display: none;
}

/* ---- reset ---- */
.WQuizApp2 .kvizarea,
.WQuizApp2 .kvizarea * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.WQuizApp2 .kvizarea {
    font-family: var(--bodyfont);
    line-height: 1.35;
    color: var(--ink);
}

.WQuizApp2 .kvizarea img {
    max-width: 100%;
    height: auto;
    display: block;
}

.WQuizApp2 .kvizarea button {
    cursor: pointer;
    font-family: inherit;
}

/* ---- card ---- */
.WQuizApp2 .kviz {
    width: 100%;
    margin: 0 auto;
}

.WQuizApp2 .kvizarea {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    position: relative;
}

/* uniform 57px inset on every side; 74px top reserves the badge/image overlap */
.WQuizApp2 .kvizarea .qslide {
    position: relative;
    padding: 74px 57px 47px;
}

/* ---- KVIZ badge: centered on the image's top edge ---- */
.WQuizApp2 .kvizarea .kviz-badge {
    position: absolute;
    top: 74px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: var(--blue);
    color: #fff;
    font-family: var(--headfont);
    font-size: 32px;
    letter-spacing: .04em;
    line-height: 1;
    padding: 11px 54px;
}

/* ---- media + progress ---- */
.WQuizApp2 .kvizarea .qmedia {
    position: relative;
    margin-bottom: 64px;
}

.WQuizApp2 .kvizarea .qimg {
    width: 100%;
    object-fit: cover;
}

.WQuizApp2 .kvizarea .qprogress {
    position: relative;
    height: 24px;
    margin-top: 24px;
    background: var(--blue-soft);
}

.WQuizApp2 .kvizarea .qprogress-fill {
    height: 100%;
    background: var(--blue);
    transition: width .35s ease;
}

.WQuizApp2 .kvizarea .qprogress-label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--headfont);
    font-size: 12px;
    color: var(--blue);
    line-height: 1;
}

/* ---- body ---- */
.WQuizApp2 .kvizarea .qtext {
    font-family: var(--headfont);
    font-size: 32px;
    line-height: 1.25;
    color: var(--ink);
    text-align: center;
    margin-bottom: 32px;
}

/* ---- answers ---- */
.WQuizApp2 .kvizarea .qanswers {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.WQuizApp2 .kvizarea .answer {
    background: var(--blue-soft);
    border: none;
    outline: none;
    color: var(--ink);
    font-family: var(--bodyfont);
    font-size: 32px;
    line-height: 1.2;
    text-align: left;
    padding: 28px 48px;
    transition: background .15s ease, color .15s ease;
}

.WQuizApp2 .kvizarea .answer:hover {
    background: var(--blue-hover);
}

.WQuizApp2 .kvizarea .answer.selected {
    background: var(--blue);
    color: #fff;
}

/* ---- next button ---- */
.WQuizApp2 .kvizarea .next {
    display: block;
    width: 100%;
    background: var(--blue);
    color: #fff;
    border: none;
    outline: none;
    font-family: var(--headfont);
    font-size: 32px;
    line-height: 1;
    padding: 30px 20px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 64px;
    transition: filter .15s ease;
}

.WQuizApp2 .kvizarea .next:hover {
    filter: brightness(1.07);
}

/* ---- no-image variant (used by the result slide) ---- */
.WQuizApp2 .kvizarea .qslide.no-image {
    padding-top: 43px;
    text-align: center;
}

.WQuizApp2 .kvizarea .qslide.no-image .kviz-badge {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 32px;
}

.WQuizApp2 .kvizarea .qslide.no-image .qbody {
    text-align: left;
}

/* ---- result ---- */
.WQuizApp2 .kvizarea .answerpost {
    text-align: center;
}

.WQuizApp2 .kvizarea .qresult-panel {
    background: var(--blue);
    color: #fff;
    padding: 64px 48px;
    text-align: center;
}

.WQuizApp2 .kvizarea .odgovor {
    font-family: var(--headfont);
    font-size: 32px;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.WQuizApp2 .kvizarea .result-text,
.WQuizApp2 .kvizarea .result-text p,
.WQuizApp2 .kvizarea .result-text span,
.WQuizApp2 .kvizarea .result-text strong {
    font-family: var(--bodyfont);
    font-size: 22px;
    line-height: 1.5;
    color: #fff !important;
}

.WQuizApp2 .kvizarea .result-text a {
    color: #fff !important;
    text-decoration: underline;
}

.WQuizApp2 .kvizarea .result-text h1,
.WQuizApp2 .kvizarea .result-text h2,
.WQuizApp2 .kvizarea .result-text h3 {
    font-family: var(--headfont);
    color: #fff;
    line-height: 1.2;
    margin: 12px 0 6px;
}

/* ---- recommended next quiz (only when data-article-source is set) ---- */
.WQuizApp2 .kvizarea .qnext {
    margin-top: 40px;
}

.WQuizApp2 .kvizarea .qnext-label {
    font-family: var(--headfont);
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 16px;
}

/* A plain link that wears the .next button skin -- normal navigation, no JS.
   The host article styles (e.g. .th_joomboos .article__body a:hover) restyle
   every link inside the article body and out-specify our .next class, so every
   link state is pinned here explicitly.
   .next carries margin-top: 64px here, so reset it: .qnext owns the spacing. */
/* sizing lives on the single-class rule only, so the mobile overrides below
   (same specificity, later in the file) can still win */
.WQuizApp2 .kvizarea .qnext-link {
    display: block;
    font-family: var(--headfont);
    font-size: 24px;
    line-height: 1.25;
    padding: 24px 20px;
    margin-top: 0;
    text-transform: none;
}

/* the skin, pinned across every link state */
.WQuizApp2 .kvizarea .qnext-link,
.WQuizApp2 .kvizarea .qnext-link:link,
.WQuizApp2 .kvizarea .qnext-link:visited,
.WQuizApp2 .kvizarea .qnext-link:hover,
.WQuizApp2 .kvizarea .qnext-link:focus,
.WQuizApp2 .kvizarea .qnext-link:active {
    background: var(--blue) !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* the same host styles hang a coloured ::after bar off hovered links */
.WQuizApp2 .kvizarea .qnext-link::before,
.WQuizApp2 .kvizarea .qnext-link::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.WQuizApp2 .kvizarea .qnext-link:hover {
    filter: brightness(1.07);
}

/* ---- transitions (crossfade) ---- */
.WQuizApp2 .kvizarea .slide-fade-enter-active,
.WQuizApp2 .kvizarea .slide-fade-leave-active {
    transition: opacity .3s ease;
}

.WQuizApp2 .kvizarea .slide-fade-leave-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.WQuizApp2 .kvizarea .slide-fade-enter,
.WQuizApp2 .kvizarea .slide-fade-leave-to {
    opacity: 0;
}

/* ---- responsive ---- */
@media screen and (max-width: 560px) {
    .WQuizApp2 .kvizarea .qslide {
        padding: 52px 34px 32px;
    }

    .WQuizApp2 .kvizarea .kviz-badge {
        top: 52px;
        font-size: 22px;
        padding: 8px 36px;
    }

    .WQuizApp2 .kvizarea .qmedia {
        margin-bottom: 44px;
    }

    .WQuizApp2 .kvizarea .qtext {
        font-size: 22px;
        margin-bottom: 22px;
    }

    .WQuizApp2 .kvizarea .qanswers {
        gap: 16px;
    }

    .WQuizApp2 .kvizarea .answer {
        font-size: 22px;
        padding: 19px 32px;
    }

    .WQuizApp2 .kvizarea .next {
        font-size: 22px;
        padding: 21px 16px;
        margin-top: 44px;
    }

    .WQuizApp2 .kvizarea .qslide.no-image {
        padding-top: 30px;
    }

    .WQuizApp2 .kvizarea .qresult-panel {
        padding: 44px 32px;
    }

    .WQuizApp2 .kvizarea .odgovor {
        font-size: 26px;
    }

    .WQuizApp2 .kvizarea .qnext-label {
        font-size: 18px;
    }

    .WQuizApp2 .kvizarea .qnext-link {
        font-size: 18px;
        padding: 18px 16px;
        margin-top: 0;
    }
}