/* Quiz modal — Tilda .t-popup chrome + form controls matched to the
   consultation/webinar forms (t-input / t-submit, PPMori, centered headings).
   The OVERLAY scrolls (flex + margin:auto); the white box has no internal
   scroll, so its padding is fully respected and there is no horizontal scrollbar. */

.quiz-popup, .quiz-popup * { box-sizing: border-box; }

.quiz-popup-root.t-popup {
    /* Above the header (9999) but below Tilda popups (10000001) so the privacy
       policy popup opens OVER the quiz, like it does on the consultation form. */
    z-index: 10000000;
    padding: 40px 20px;
    -webkit-overflow-scrolling: touch;
}

.quiz-popup {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 680px;
    background: #fff;
    border-radius: 24px;
    padding: 48px;
    cursor: default;
    font-family: 'PPMori', 'Hanken Grotesk', Arial, sans-serif;
    color: #111317;
    opacity: 0;
    transform: translateY(20px) scale(.97);
    transition: opacity .3s ease, transform .3s ease;
}
.t-popup_show .quiz-popup { opacity: 1; transform: none; }
@media (max-width: 600px) { .quiz-popup { padding: 28px; border-radius: 18px; } }

/* Close (×) shown when the modal locks itself once the visitor starts filling it
   in (an outside click no longer closes it — prevents accidental loss). */
.quiz-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(17, 19, 23, .06);
    color: #4a4d57;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.quiz-close:hover { background: rgba(17, 19, 23, .12); color: #111317; }
@media (max-width: 600px) { .quiz-close { top: 10px; right: 10px; } }

/* Smooth fade + slide between steps (no reload). */
.quiz-step { animation: quizStepIn .32s ease both; }
@keyframes quizStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Progress indicator */
.quiz-prog { height: 6px; border-radius: 999px; background: rgba(10,17,71,.1); overflow: hidden; margin-bottom: 10px; }
.quiz-prog__bar { height: 100%; border-radius: 999px; background: #2015ff; transition: width .35s ease; }
.quiz-prog__label { font-size: 12px; color: #8a8d96; text-align: center; letter-spacing: .04em; margin: 0 0 18px; }

.quiz-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #2015ff; text-align: center; margin: 0 0 12px; }
.quiz-title { font-size: 30px; font-weight: 700; line-height: 1.2; text-align: center; margin: 0 0 10px; }
@media (max-width: 600px) { .quiz-title { font-size: 22px; } }
.quiz-subtitle { font-size: 16px; line-height: 1.45; color: #4a4d57; text-align: center; margin: 0 0 22px; }
.quiz-note { font-size: 14px; color: #6b6e78; text-align: center; margin: 16px 0 24px; }

.quiz-receive { font-weight: 600; text-align: center; margin: 0 0 12px; }
.quiz-benefits { list-style: none; margin: 18px auto; padding: 0; display: grid; gap: 11px; max-width: 460px; }
.quiz-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.quiz-benefits li::before { content: "✓"; color: #2015ff; font-weight: 700; }

/* Answer options as selectable cards (highlight + checkmark on select). */
.quiz-options { display: grid; gap: 12px; margin: 4px 0 8px; }
.quiz-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; width: 100%; padding: 16px 18px; border: 1px solid rgba(10,17,71,.14); border-radius: 14px; background: #fff; font-size: 16px; line-height: 1.35; color: #111317; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; font-family: inherit; }
.quiz-option:hover { border-color: #2015ff; background: rgba(32,21,255,.04); }
.quiz-option.is-selected { border-color: #2015ff; background: rgba(32,21,255,.08); box-shadow: inset 0 0 0 1px #2015ff; }
.quiz-option__label { flex: 1; }
.quiz-option__check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2015ff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
/* radio-based slot cards (webinar): selection via :has, no JS */
.quiz-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-option:has(.quiz-radio) .quiz-option__check { display: none; }
.quiz-option:has(.quiz-radio:checked) .quiz-option__check { display: flex; }
.quiz-option:has(.quiz-radio:checked) { border-color: #2015ff; background: rgba(32,21,255,.08); box-shadow: inset 0 0 0 1px #2015ff; }
/* webinar slot cards: single row, centered date */
.quiz-options--row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quiz-option--slot { justify-content: center; text-align: center; padding: 14px 8px; font-weight: 500; }
.quiz-slot-note { font-size: 14px; line-height: 1.4; color: #6b6e78; text-align: center; margin: -2px 0 14px; }
@media (max-width: 480px) { .quiz-option--slot { padding: 12px 4px; font-size: 14px; } }

/* Inputs — matched to Tilda .t-input */
.quiz-field { margin-bottom: 18px; text-align: left; }
.quiz-label { display: block; font-size: 15px; color: #7d8b98; margin-bottom: 8px; }
.quiz-input { width: 100%; height: 50px; padding: 0 20px; border: 1px solid #d9d9d9; border-radius: 16px; background: #fff; color: #000317; font-size: 18px; font-family: inherit; outline: none; transition: border-color .15s; }
.quiz-input::placeholder { color: #7d8b98; }
.quiz-input:focus { border-color: #2015ff; }
.quiz-textarea { height: auto; min-height: 84px; padding: 14px 20px; resize: vertical; line-height: 1.4; }
/* intl-tel-input phone field — fill the field width + match input height */
.iti { width: 100%; display: block; }
.iti input.quiz-phone { width: 100%; }
/* round the flag button's left corners so its hover bg stays inside the rounded input */
.iti .iti__selected-country,
.iti .iti__selected-country-primary { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
/* dial code (+359) — match the modal's label gray + the input's text size,
   like the original site's phonemask code (#7d8b98 / 18px). */
.iti .iti__selected-dial-code { color: #7d8b98; font-size: 18px; }
/* country dropdown — matched to the site. v29 panel = .iti__country-selector; the
   detached wrapper (desktop dropdown + mobile fullscreen popup) defaults to
   z-index 1060, below our modals (10000000) — lift it above. box-sizing because
   it is appended to <body>, outside .quiz-popup's reset. Keep the library's own
   left padding on the search input (~37px) so its icon doesn't overlap the text. */
.iti--detached-country-selector { z-index: 10000002; font-family: 'PPMori', 'Hanken Grotesk', Arial, sans-serif; }
.iti--detached-country-selector,
.iti--detached-country-selector * { box-sizing: border-box; }
.iti__search-input { color: #000317; }
.iti__search-input:focus { outline: none; border-color: #2015ff; box-shadow: inset 0 0 0 1px #2015ff; }
.iti__country-list { overflow-x: hidden; }
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(32,21,255,.08); }
/* Pretty rounded box + inset search ONLY for the desktop dropdown (inline, or
   detached-but-not-fullscreen) — on mobile we let the native fullscreen popup
   layout stand. Desktop uses .iti--inline-country-selector. */
.iti--inline-country-selector .iti__country-selector,
.iti--detached-country-selector:not(.iti--fullscreen-popup) .iti__country-selector {
    border: 1px solid #d9d9d9; border-radius: 16px; overflow: hidden;
    box-shadow: 0 14px 34px -12px rgba(32,21,255,.3);
}
.iti--inline-country-selector .iti__search-input,
.iti--detached-country-selector:not(.iti--fullscreen-popup) .iti__search-input {
    border: 1px solid #d9d9d9; border-radius: 12px; margin: 8px; width: calc(100% - 16px);
}
/* the search box is inset 8px, so shift its icon right to match (8px + the
   library's 10px gap) instead of hugging the rounded left edge. */
.iti--inline-country-selector .iti__search-icon,
.iti--detached-country-selector:not(.iti--fullscreen-popup) .iti__search-icon { left: 18px; }
.iti--inline-country-selector .iti__country-list,
.iti--detached-country-selector:not(.iti--fullscreen-popup) .iti__country-list { border-radius: 0 0 16px 16px; }
.quiz-error { display: block; color: #d2342b; font-size: 13px; text-align: left; margin-top: 6px; }
/* invalid-field state — the red class is on the .quiz-field WRAPPER (set via @error)
   so it also styles the phone, whose <input> lives inside wire:ignore. */
.quiz-field--error .quiz-input { border-color: #d2342b; box-shadow: 0 0 0 1px rgba(210, 52, 43, .18); }
.quiz-field--error .quiz-input:focus { border-color: #d2342b; box-shadow: 0 0 0 1px rgba(210, 52, 43, .4); }
.quiz-field--error .quiz-label { color: #d2342b; }
.quiz-field--error .quiz-option { border-color: #d2342b; }

/* Buttons — matched to Tilda .t-submit */
.quiz-btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 30px; border: 1px solid #bac6ff; border-radius: 100px; background: #000317; color: #fff; font-size: 18px; font-weight: 400; font-family: inherit; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(32,21,255,.5); transition: background .15s, box-shadow .15s; }
.quiz-btn:hover { background: #323457; }
.quiz-btn:disabled { opacity: .6; cursor: default; }
.quiz-btn--block { width: 100%; }

.quiz-submit-row { text-align: center; margin-top: 18px; }
.quiz-consent { font-size: 16px; line-height: 19px; color: #999999; text-align: center; margin: 16px 0 4px; }
.quiz-consent a { color: #002379; text-decoration: none; }
.quiz-consent a:hover { text-decoration: underline; }

.quiz-actions { margin-top: 12px; }
.quiz-back { display: block; margin: 10px auto 0; width: max-content; background: none; border: 0; color: #6b6e78; font-size: 15px; font-family: inherit; cursor: pointer; padding: 8px 4px; }
.quiz-back:hover { color: #111317; }

.quiz-success { text-align: center; padding: 12px 4px; }
.quiz-success .quiz-check { width: 60px; height: 60px; border-radius: 50%; background: rgba(32,21,255,.1); color: #2015ff; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 18px; }

/* The native LeadFormModal replaces Tilda's consultation/webinar popups — hide
   Tilda's so they can't open (the triggers are routed to the native modals). */
.t-popup[data-tooltip-hook="#form"],
.t-popup[data-tooltip-hook="#webinar"] { display: none !important; }

[x-cloak] { display: none !important; }