@import url("novaims-nav.css");

/* FONTS */
/* ===== BORNA ===== */

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-regularitalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-mediumitalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-semibolditalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Borna';
    src: url('../fonts/borna/borna-bolditalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}


/* ===== SWIZA ===== */

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-extralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-regularitalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-extralightitalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-lightitalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-mediumitalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-semibolditalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Swiza';
    src: url('../fonts/swiza/swiza-bolditalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Nova IMS Visionary';
    src: url('../fonts/nova_visionary.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}


:root {
    /* Colors */
    --color-brand: #0EE071;
    --color-black: #000;
    --color-text: #222;
    --color-text-muted: rgba(0, 0, 0, 0.55);
    --color-text-sub: rgba(0, 0, 0, 0.2);
    --color-bg-white: #fff;
    --color-bg-quiz: #f5f5f5;
    --color-bg-card: #eaeaea;
    --color-white: #fff;
    --color-border: #d9d9d9;
    --color-overlay: rgba(255, 255, 255, 0.7);

    /* Font families */
    --font-title: 'Borna', sans-serif;
    --font-body: 'Swiza', sans-serif;
    --font-visionary: 'Nova IMS Visionary', sans-serif;

    /* Font sizes — base 16px, all in rem */
    --font-size-xs: 0.875rem; /* 14px */
    --font-size-sm: 1rem; /* 16px — body default */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-xl: 1.5625rem; /* 25px */
    --font-size-xxl: 2.1875rem; /* 35px */
    --font-size-xxxl: 4.5rem; /* 72px */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.875rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 3.5rem;
    --space-2xl: 4.5rem;

    /* Misc */
    --radius-pill: 1.375rem;
    --radio-size: 2.125rem;
    --radio-dot-size: 1rem;
    --pixel-size: 2.125rem;
    --transition-fast: 0.2s;

    /* BS vars*/
    --bs-link-color-rgb: rgba(0, 0, 0);
    --bs-link-hover-color-rgb: rgb(255, 255, 255);
    --bs-body-color: #000;

}


/* ─── GLOBAL TYPOGRAPHY ─── */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    display: flex;
    flex-direction: column;
}

b, strong {
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
}

.special-letter {
    font-family: var(--font-visionary);
}

a {
    text-decoration: none;

    &:hover {
        color: var(--bs-link-color-rgb);
        cursor: pointer;
    }
}

.back-btn {
    font-size: var(--font-size-xl);
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

}

/* ─── SKILL CHECKER PANEL ─── */

.skill-checker-panel {
    background: var(--color-brand);
    padding: 0 4rem 5rem;

    .skill-checker-copy {
        padding: 6rem 2rem 2rem 1rem;
        max-width: 540px;
    }

    .skill-checker-logo {
        font-family: var(--font-title);
        line-height: 0.88;
        font-weight: var(--fw-medium);
        font-size: clamp(3rem, 6vw, 5.5rem);
        letter-spacing: -0.04em;
        text-transform: uppercase;
    }

    .skill-checker-title {
        font-family: var(--font-title);
        font-size: calc(var(--font-size-xl) * 1.5);
        line-height: 0.95;
        font-weight: var(--fw-medium);
        max-width: 420px;
    }

    .skill-checker-text {
        font-family: var(--font-body);
        font-size: var(--font-size-sm);
        line-height: 1.35;
        max-width: 520px;
    }

    .skill-checker-btn {
        min-width: 360px;
        background: var(--color-white);
        color: var(--color-black);
        border: 1px solid var(--color-border);
        border-radius: 0;
        padding: 1.25rem 1.5rem;
        font-weight: var(--fw-medium);
        font-size: var(--font-size-md);

        &:hover {
            background: var(--color-white);
            color: var(--color-black);
        }
    }

    .skill-checker-image-wrap {
        min-height: 680px;
        height: 100%;

        img {
            display: block;
        }
    }

    @media (max-width: 991.98px) {
        padding: 2rem;

        .skill-checker-copy {
            padding: 1rem 0 2rem;
            max-width: 100%;
        }

        .skill-checker-btn {
            min-width: 100%;
        }

        .skill-checker-image-wrap {
            min-height: 420px;
            margin-top: 1.5rem;
        }
    }
}


/* ─── QUIZ SCREEN ─── */

.quiz-screen {
    background: var(--color-bg-quiz);
    min-height: 100%;
}


/* HEADER */

.quiz-header {
    background: var(--color-brand);
    padding: var(--space-lg) 3.75rem;
    position: relative;
    padding-left: 1rem;

    &:after {
        content: '';
        position: absolute;
        right: 3rem;
        bottom: 0;
        transform: translateY(50%);
        width: 150px;
        height: 250px;
        background-image: url('../img/eye.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .quiz-header-inner {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
    }

    .quiz-back {
        font-size: var(--font-size-xl);
        cursor: pointer;
    }

    .quiz-progress-box {
        background: var(--color-white);
        padding: var(--space-sm) 1.75rem;
        font-size: var(--font-size-xl);
        font-weight: 600;
        display: flex;
        gap: .3rem;
    }

    .quiz-question-title {
        font-size: var(--font-size-xxl);
        font-weight: 600;
        margin: 0;
        max-width: 60%;
    }

    .quiz-header-decoration {
        width: 8.75rem;
        height: 0.625rem;
        background: var(--color-black);
        margin-top: 1.875rem;
    }
}

/* Progress Bar */
.progress {
    --bs-progress-border-radius: 0;
    z-index: 2;
    position: relative;
}

.progress-bar {
    --bs-progress-bar-color: var(--color-black);
    --bs-progress-bar-bg: var(--color-black);
}

/* CONTENT */

.quiz-content {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#choicesContainer {
    align-items: stretch;
}

/* OPTION CARD */

.quiz-option {
    background: var(--color-bg-card);
    border-radius: var(--radius-pill);
    padding: 3.125rem var(--space-lg);
    text-align: center;
    position: relative;
    transition: var(--transition-fast);
    height: 100%;

    &:hover {
        transform: translateY(-4px);
        cursor: pointer;
    }

    .quiz-radio {
        width: var(--radio-size);
        height: var(--radio-size);
        border: 3px solid var(--color-brand);
        border-radius: 50%;
        position: absolute;
        top: 1.5625rem;
        left: 1.5625rem;
    }

    .quiz-illustration {
        margin-top: 1.875rem;
        margin-bottom: 1.875rem;
    }

    .quiz-option-text {
        font-size: var(--font-size-lg);
        line-height: 1.4;
        margin: auto;
    }
}

.choice-card.selected {
    .quiz-option {
        border: 3px solid var(--color-brand);

        .quiz-radio span {
            display: block;
            width: var(--radio-dot-size);
            height: var(--radio-dot-size);
            background: var(--color-brand);
            border-radius: 50%;
            margin: 6px auto;
        }
    }
}


/* LOTTIE */

.lottie-container {
    width: 100%;
    height: 7.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        width: 100%;
        height: 100%;
        max-width: 7.5rem;
        max-height: 7.5rem;
    }
}

/* Shared styles */
[data-choice-id] .lottie-container {
    display: none;
}

/* ─── QUIZ RESULT SCREEN ─── */

.quiz-result-screen {
    background: var(--color-brand);
    min-height: 100vh;
    padding: 2rem var(--space-md);

    .quiz-result-shell {
        max-width: 1460px;
        margin: 0 auto;
    }

    .quiz-result-card {
        background: var(--color-bg-white);
        position: relative;
        /*overflow: hidden;*/
        min-height: 820px;
    }

    .quiz-result-visual {
        position: relative;
        min-height: 520px;
        height: 100%;
        padding: var(--space-xl) 2rem 0 3rem;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        z-index: 3;
    }

    .quiz-result-points {
        position: absolute;
        top: var(--space-xl);
        left: 3rem;
        z-index: 3;
        line-height: 1;

        .quiz-result-points-range {
            font-size: var(--font-size-xxl);
            font-weight: var(--fw-semibold);
            color: var(--color-black);
            letter-spacing: -0.03em;
            margin-bottom: 0.375rem;
        }

        .quiz-result-points-label {
            font-size: var(--font-size-sm);
            font-weight: var(--fw-bold);
            color: var(--color-brand);
        }
    }

    .quiz-result-illustration {
        /*width: 100%;*/
        /*max-width: 760px;*/
        width: 100%;
        max-width: 750px;
        height: auto;
        object-fit: contain;
        display: block;
        position: relative;
        transition: all .3s ease;
    }

    .quiz-result-illustration--bottom {
        position: absolute;
        bottom: 0;
        transform: translateX(-8%);
        width: calc(100% + 81px);
        z-index: 2;
    }


    .quiz-result-copy--wrapper {
        position: relative;
        isolation: isolate;

        &:after {
            content: '';
            position: absolute;
            right: -4px;
            bottom: -12px;
            width: 300px;
            height: 230px;
            background-image: url('../img/eye-top.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: -1;
            image-rendering: crisp-edges;
        }
    }

    .quiz-result-copy {
        padding: var(--space-2xl) var(--space-2xl) 3rem 1.75rem;
        max-width: 640px;
    }

    .quiz-result-title {
        font-size: var(--font-size-xxxl);
        line-height: 0.92;
        font-weight: var(--fw-semibold);
        letter-spacing: -0.05em;
        color: var(--color-black);
        margin: 0 0 1.75rem;
    }

    .quiz-result-text {
        font-size: var(--font-size-md);
        line-height: 1.45;
        color: var(--color-text);
        max-width: 620px;
        margin: 0 0 1.875rem;
    }

    .quiz-result-unlock-title {
        font-size: var(--font-size-md);
        font-weight: var(--fw-semibold);
        color: var(--color-black);
        margin-bottom: var(--space-xs);
    }

    .quiz-result-list {
        margin: 0;
        padding-left: 1.25rem;
        font-size: var(--font-size-md);
        line-height: 1.55;
        color: var(--color-text);
    }

    /* CTA */

    .quiz-result-cta-wrap {
        position: relative;
        margin-top: -10px;
    }

    .quiz-result-cta {
        background: var(--color-brand);
        padding: 2.75rem var(--space-2xl) 2.875rem 1.75rem;
        padding-left: calc(8.33333333% * 2) !important;
        min-height: 290px;

        .quiz-result-cta-title {
            font-size: var(--font-size-xxl);
            line-height: 1.05;
            font-weight: var(--fw-semibold);
            color: var(--color-black);
            letter-spacing: -0.03em;
            margin: 0 0 1.125rem;
            max-width: 560px;
        }

        .quiz-result-cta-text {
            font-size: var(--font-size-sm);
            line-height: 1.4;
            color: var(--color-black);
            max-width: 500px;
            margin: 0 0 1.75rem;
        }
    }

    .quiz-result-form {
        margin-bottom: 1.375rem;
    }

    .quiz-result-input-group {
        display: flex;
        align-items: stretch;
        width: 100%;
        max-width: 430px;
        background: var(--color-bg-white);
        border: 1px solid black;
        margin-bottom: 2rem;

        .quiz-result-input {
            flex: 1 1 auto;
            min-width: 0;
            border: 0;
            background: transparent;
            padding: 1rem 1.125rem;
            font-size: var(--font-size-sm);
            font-weight: var(--fw-bold);
            color: var(--color-black);
            text-transform: uppercase;
            outline: none;

            &::placeholder {
                color: var(--color-text-muted);
                opacity: 1;
            }
        }

        .quiz-result-submit {
            width: 4.5rem;
            border: 0;
            background: transparent;
            font-size: var(--font-size-xxl);
            color: var(--color-black);
            cursor: pointer;
        }
    }

    .quiz-result-repeat {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-size: var(--font-size-sm);
        font-weight: var(--fw-bold);
        color: var(--color-black);
        text-decoration: none;
        background: transparent;
        outline: none;
        border: none;
        padding: 1rem 2rem;
        padding-left: 0;
        transition: all .3s ease;

        &:hover {
            color: var(--color-white);
            text-decoration: none;
            background-color: black;
            padding-left: 2rem;

            .quiz-result-repeat-icon {
                filter: invert(1);
            }
        }

        .quiz-result-repeat-icon svg {
            font-size: var(--font-size-xl);
            line-height: 1;
        }
    }

    /* Pixel decoration */

    .quiz-result-pixels {
        position: absolute;
        top: -14px;
        right: 0;
        width: 180px;
        height: 120px;

        .pixel {
            position: absolute;
            width: var(--pixel-size);
            height: var(--pixel-size);
            background: var(--color-brand);

            &.pixel-1 {
                top: 0;
                right: 112px;
            }

            &.pixel-2 {
                top: 0;
                right: 78px;
                background: var(--color-bg-white);
            }

            &.pixel-3 {
                top: 2.125rem;
                right: 146px;
            }

            &.pixel-4 {
                top: 2.125rem;
                right: 112px;
                background: var(--color-bg-white);
            }

            &.pixel-5 {
                top: 2.125rem;
                right: 44px;
                background: var(--color-bg-white);
            }

            &.pixel-6 {
                top: 4.25rem;
                right: 146px;
                background: var(--color-bg-white);
            }

            &.pixel-7 {
                top: 4.25rem;
                right: 78px;
                background: var(--color-bg-white);
            }

            &.pixel-8 {
                top: 4.25rem;
                right: 44px;
                background: var(--color-bg-white);
            }
        }
    }

    /* Responsive */

    @media (max-width: 1199.98px) {
        .quiz-result-title {
            font-size: 3.75rem;
        }

        .quiz-result-copy {
            padding: var(--space-xl) 3rem 2.5rem var(--space-md);
        }

        .quiz-result-cta {
            padding: var(--space-lg) 3rem 2.625rem var(--space-md);
        }
    }

    @media (max-width: 991.98px) {
        .quiz-result-card {
            min-height: auto;
        }

        .quiz-result-visual {
            min-height: 420px;
            padding: 5.5rem var(--space-md) 0;
        }

        .quiz-result-points {
            top: 1.75rem;
            left: var(--space-md);
        }

        .quiz-result-copy {
            padding: 2.25rem var(--space-md) var(--space-md);
            max-width: none;
        }

        .quiz-result-title {
            font-size: 3rem;
        }

        .quiz-result-cta-wrap {
            margin-top: 0;
        }

        .quiz-result-cta {
            padding: 2rem var(--space-md) 2.25rem;
        }

        .quiz-result-pixels {
            width: 130px;
            height: 90px;
            top: var(--space-xs);
            right: var(--space-xs);
            transform: scale(0.8);
            transform-origin: top right;
        }
    }

    @media (max-width: 575.98px) {
        padding: 1rem 0.75rem;

        .quiz-result-title {
            font-size: 2.375rem;
        }

        .quiz-result-text,
        .quiz-result-list,
        .quiz-result-unlock-title {
            font-size: var(--font-size-sm);
        }

        .quiz-result-cta-title {
            font-size: var(--font-size-xxl);
        }

        .quiz-result-input-group {
            max-width: none;
        }

        .quiz-result-submit {
            width: 4rem;
        }
    }
}


/* ─── LOADING OVERLAY ─── */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    .spinner-border {
        color: var(--color-black);
        padding-left: 1rem;
        display: block;
    }

    .card {
        background-color: var(--color-brand);
    }
}


/* ─── FOOTER BOTTOM BAR ─── */
.footer  {
    margin-top: auto;
    background-color: var(--color-black);
    background-image: url("https://novaims.unl.pt/assets/Default/images/eye.png");
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: right;
}

.footer-wrapper {
    padding: 2.5rem 0;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.footer__links {
    display: flex;
    gap: var(--space-md);
}

.footer__link {
    font-family: var(--font-title);
    font-size: var(--font-size-md);
    font-weight: var(--fw-medium);
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition-fast);

    &:hover {
        opacity: 0.7;
        color: var(--color-white);
    }
}

.footer__copy {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--fw-regular);
    color: var(--color-white);
}