.gdt-unavailable,
.gdt-noscript {
    padding: 1em !important;
    border: 1px solid #c00 !important;
    border-radius: 4px;
    color: #c00 !important;
    background: #fff5f5 !important;
}

/* ==========================================================================
   Design tokens — scoped to .gdt-root (not :root) since this widget embeds
   into an arbitrary host page and must not leak variable names into the
   host's global scope. Every component rule below reads var(--gdt-*),
   never a literal color, so both themes stay correct automatically.
   ========================================================================== */
.gdt-root {
    --gdt-accent: #F2751A;
    --gdt-accent-dark: #D4620F;
    --gdt-accent-tint: #FDEEE2;
    --gdt-accent-ring: rgba(242, 117, 26, .18);
    --gdt-ink: #23262B;
    --gdt-ink-soft: #6B7178;
    --gdt-border: #E7E3DD;
    --gdt-card-bg: #FFFFFF;
    --gdt-page-bg: #F3F1EC;
    --gdt-success: #1B7A4A;
    --gdt-success-bg: #E7F4ED;
    --gdt-success-border: #A9D6BE;
    --gdt-danger: #C8102E;
    --gdt-danger-bg: #FBEAEC;
    --gdt-danger-border: #EFB3BC;

    max-width: 40em;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gdt-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.gdt-root[data-theme="dark"] {
    --gdt-accent: #FF9A4D;
    --gdt-accent-dark: #FFB374;
    --gdt-accent-tint: #3A2A1C;
    --gdt-accent-ring: rgba(255, 154, 77, .22);
    --gdt-ink: #EDEBE6;
    --gdt-ink-soft: #A6ABB2;
    --gdt-border: #3A3D42;
    --gdt-card-bg: #1C1E22;
    --gdt-page-bg: #131416;
    --gdt-success: #4FC287;
    --gdt-success-bg: #16281F;
    --gdt-success-border: #2E5A41;
    --gdt-danger: #FF6B7A;
    --gdt-danger-bg: #2E1518;
    --gdt-danger-border: #63232B;
}

@media (prefers-color-scheme: dark) {
    .gdt-root:not([data-theme="light"]) {
        --gdt-accent: #FF9A4D;
        --gdt-accent-dark: #FFB374;
        --gdt-accent-tint: #3A2A1C;
        --gdt-accent-ring: rgba(255, 154, 77, .22);
        --gdt-ink: #EDEBE6;
        --gdt-ink-soft: #A6ABB2;
        --gdt-border: #3A3D42;
        --gdt-card-bg: #1C1E22;
        --gdt-page-bg: #131416;
        --gdt-success: #4FC287;
        --gdt-success-bg: #16281F;
        --gdt-success-border: #2E5A41;
        --gdt-danger: #FF6B7A;
        --gdt-danger-bg: #2E1518;
        --gdt-danger-border: #63232B;
    }
}

.gdt-root :focus-visible {
    outline: 3px solid var(--gdt-accent);
    outline-offset: 2px;
}

.gdt-root .gdt-focus-target {
    outline: none;
}

/* ==========================================================================
   Theme-survival hardening — the host theme's own CSS was observed
   overriding plugin styling outright rather than partially, on two
   separate occasions: first .gdt-answer and .gdt-btn-primary rendering as
   flat dark blocks instead of their defined styling, then a heading
   (.gdt-start-title) rendering unreadable because it had no explicit
   `color` and relied on inheritance — which loses to ANY theme rule that
   touches the element, no matter how unspecific that rule is, because an
   inherited value is weaker than any explicit declaration in the cascade.
   Given that pattern, every color/background declaration in this file
   below is explicit and carries !important, not just the properties from
   the first report. Do not remove !important, and do not add a new color
   or background declaration without it — this is not decorative caution,
   it is what fixes the reported bugs and prevents the next one.
   ========================================================================== */
.gdt-root button {
    background: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
}

.gdt-root button,
.gdt-root input,
.gdt-root label {
    font: inherit;
    line-height: normal;
    color: inherit;
    text-align: left;
}

.gdt-root .gdt-screen {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background: var(--gdt-card-bg) !important;
    border: 1px solid var(--gdt-border) !important;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 16, 10, .04), 0 10px 28px rgba(20, 16, 10, .07);
    padding: 28px 30px 26px;
}

.gdt-root .gdt-btn {
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .93rem;
    cursor: pointer;
    border: 1.5px solid var(--gdt-border) !important;
    background-color: var(--gdt-card-bg) !important;
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-btn:hover {
    border-color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gdt-root .gdt-btn-primary {
    background-color: var(--gdt-accent) !important;
    border-color: var(--gdt-accent) !important;
    color: #fff !important;
}

.gdt-root .gdt-btn-primary:hover {
    background-color: var(--gdt-accent-dark) !important;
    border-color: var(--gdt-accent-dark) !important;
}

.gdt-root .gdt-nav > .gdt-btn-primary {
    margin-left: auto;
}

.gdt-root .gdt-start-title,
.gdt-root .gdt-result-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-rules-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gdt-root .gdt-rule-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--gdt-page-bg) !important;
    border: 1px solid var(--gdt-border) !important;
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 96px;
}

.gdt-root .gdt-rule-chip b {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-rule-chip span {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-category-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 5px 13px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .01em;
    background: var(--gdt-accent-tint) !important;
    color: var(--gdt-accent-dark) !important;
    border: 1px solid var(--gdt-accent) !important;
}

.gdt-root .gdt-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.gdt-root .gdt-fullscreen-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 4px;
    background: none !important;
    color: var(--gdt-ink-soft) !important;
    cursor: pointer;
}

.gdt-root .gdt-fullscreen-btn:hover {
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-fullscreen-btn svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    flex: none !important;
}

.gdt-root .gdt-timer-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    background: var(--gdt-page-bg) !important;
    border: 1px solid var(--gdt-border) !important;
}

.gdt-root .gdt-timer-icon {
    flex: none;
    opacity: .7;
}

.gdt-root .gdt-timer {
    font-weight: 700;
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-timer-warning {
    border-color: var(--gdt-danger-border) !important;
    background: var(--gdt-danger-bg) !important;
    color: var(--gdt-danger) !important;
}

.gdt-root .gdt-timer-warning .gdt-timer {
    color: var(--gdt-danger) !important;
}

.gdt-root .gdt-qeyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
    color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-qprogress-track {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--gdt-border) !important;
}

.gdt-root .gdt-qprogress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--gdt-accent) !important;
}

.gdt-root .gdt-question {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.gdt-root .gdt-question-text {
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.5;
    margin: 0;
    text-wrap: balance;
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-question-image {
    max-width: 100%;
    height: auto;
    align-self: flex-start;
    border-radius: 10px;
    border: 1px solid var(--gdt-border);
}

.gdt-root .gdt-answer {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    border: 1.5px solid var(--gdt-border) !important;
    background-color: var(--gdt-card-bg) !important;
}

.gdt-root .gdt-answer:hover {
    border-color: var(--gdt-accent) !important;
    background-color: var(--gdt-accent-tint) !important;
}

.gdt-root .gdt-answer.gdt-selected {
    border-color: var(--gdt-accent) !important;
    background-color: var(--gdt-accent-tint) !important;
    box-shadow: 0 0 0 3px var(--gdt-accent-ring);
}

.gdt-root .gdt-answer:focus-within {
    outline: 3px solid var(--gdt-accent);
    outline-offset: 2px;
}

/* Radio input stays in the DOM for keyboard/screen-reader semantics (the
   `role=radiogroup` pattern needs a real, focusable input) but is visually
   hidden — the card's own border/background/box-shadow above is the only
   visible selection indicator. Standard "sr-only" clip technique, not
   display:none/visibility:hidden, so it stays focusable and announced. */
.gdt-root .gdt-answer input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gdt-root .gdt-answer span {
    font-size: .97rem;
    line-height: 1.4;
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid var(--gdt-border) !important;
    padding-top: 18px;
    margin-top: 2px;
}

.gdt-root .gdt-nav-row {
    display: flex;
    gap: 10px;
}

.gdt-root .gdt-nav .gdt-btn:not(.gdt-btn-primary) {
    background-color: var(--gdt-page-bg) !important;
}

.gdt-root .gdt-submit-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 100%;
}

.gdt-root .gdt-submit-confirm-text {
    margin: 0;
    font-size: .87rem;
    color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-submit-confirm-actions {
    display: flex;
    gap: 10px;
}

.gdt-root .gdt-submit-confirm-actions .gdt-btn {
    flex: 1 1 0;
}

.gdt-root .gdt-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 8px;
}

.gdt-root .gdt-palette-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--gdt-border) !important;
    background-color: var(--gdt-card-bg) !important;
    color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-palette-btn.gdt-answered {
    background-color: var(--gdt-success-bg) !important;
    border-color: var(--gdt-success-border) !important;
    color: var(--gdt-success) !important;
}

.gdt-root .gdt-palette-btn.gdt-current {
    border-color: var(--gdt-accent) !important;
    border-width: 2px !important;
    color: var(--gdt-accent) !important;
    box-shadow: 0 0 0 3px var(--gdt-accent-ring);
}

.gdt-root .gdt-result-banner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gdt-root .gdt-result-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.gdt-root .gdt-result-icon.gdt-pass {
    background: var(--gdt-success-bg) !important;
    color: var(--gdt-success) !important;
}

.gdt-root .gdt-result-icon.gdt-fail {
    background: var(--gdt-danger-bg) !important;
    color: var(--gdt-danger) !important;
}

.gdt-root h2.gdt-pass {
    color: var(--gdt-success) !important;
}

.gdt-root h2.gdt-fail {
    color: var(--gdt-danger) !important;
}

.gdt-root .gdt-score {
    font-size: .95rem;
    color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-expired-note {
    font-style: italic;
    color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-review {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gdt-root .gdt-review-item {
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--gdt-border) !important;
}

.gdt-root .gdt-review-item.gdt-correct {
    border-left-color: var(--gdt-success) !important;
}

.gdt-root .gdt-review-item.gdt-incorrect {
    border-left-color: var(--gdt-danger) !important;
}

.gdt-root .gdt-review-question {
    font-weight: 700;
    font-size: .92rem;
    margin: 0 0 4px;
    color: var(--gdt-ink) !important;
}

.gdt-root .gdt-review-your,
.gdt-root .gdt-review-correct {
    font-size: .87rem;
    margin: 2px 0;
    color: var(--gdt-ink-soft) !important;
}

.gdt-root .gdt-review-item.gdt-incorrect .gdt-review-your {
    color: var(--gdt-danger) !important;
}

.gdt-root .gdt-review-item.gdt-correct .gdt-review-your {
    color: var(--gdt-success) !important;
}

.gdt-root .gdt-error-message {
    color: var(--gdt-danger) !important;
}

.gdt-root .gdt-actions {
    display: flex;
    gap: 0.5em;
}

/* ==========================================================================
   Mobile breakpoint — the plugin embeds full-width inside a Flatsome/UX
   Builder column, which stacks to the device width on phones, so this
   component has to reflow on its own; the host theme provides no help
   here. 600px was chosen empirically against the live site: the nav row
   below still wraps one-button-per-row at 540px and is clean at 600px.
   ========================================================================== */
@media (max-width: 600px) {
    .gdt-root .gdt-nav-row {
        width: 100%;
    }

    .gdt-root .gdt-nav-row .gdt-btn {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gdt-root .gdt-nav > .gdt-btn-primary {
        width: 100%;
        margin-left: 0;
    }

    .gdt-root .gdt-screen {
        padding: 18px 16px 20px;
    }

    .gdt-root .gdt-fullscreen-btn {
        display: flex;
    }
}

/* ==========================================================================
   Fullscreen state — the browser's own UA stylesheet takes the fullscreened
   element out of normal page flow, but our base rule's max-width:40em still
   applies to it unless overridden here, which would leave a narrow column
   stranded in the middle of the screen instead of a proper backdrop. The
   card itself gets the 40em cap back so it keeps its normal readable width,
   just centered against the new backdrop instead of the host page's margins.

   Deliberately NOT `display:flex; align-items:center` on this container:
   centering a child taller than the container splits the overflow evenly
   above AND below it, and the portion pushed above the top edge becomes
   unreachable by scrolling in mobile Safari/Chrome even when scrolled all
   the way up — confirmed on a real notched phone, where the meta-row,
   heading, and progress bar (everything above the fold) were pushed into
   that unreachable region. Plain block flow plus `margin:0 auto` on the
   card gives the same horizontal centering without the scroll trap; when
   the card is taller than the screen it simply starts at the top and
   scrolls normally, like every other screen state.
   ========================================================================== */
.gdt-root:fullscreen,
.gdt-root:-webkit-full-screen {
    max-width: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: var(--gdt-page-bg) !important;
}

.gdt-root:fullscreen .gdt-screen,
.gdt-root:-webkit-full-screen .gdt-screen {
    max-width: 40em;
    width: 100%;
    margin: 0 auto;
}