* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
    background: #f2f2f2;
}

body {
    display: flex;
    justify-content: center;
}

.reference-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.reference-stage {
    position: relative;
    width: 100vw;
}

.reference-image {
    display: block;
    width: 100vw;
    max-width: none;
    height: auto;
}

.desktop-copy-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
}

.tablet-copy-layer {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
}

.mobile-copy-layer {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
}

.mobile-steps-carousel {
    display: none;
}

/* Clickable area over the "Sækja um hér" button in reference image */
.apply-hitbox {
    position: absolute;
    z-index: 3;
    display: block;
    cursor: pointer;
    left: 7.9%;
    top: 14.2%;
    width: 13%;
    height: 1.7%;
    border-radius: 10px;
}

.apply-hitbox:focus-visible {
    outline: 2px solid #ffffff;
    box-shadow: 0 0 0 4px #32ce32;
}

@media (max-width: 1100px) {
    .desktop-copy-layer {
        display: none;
    }

    .tablet-copy-layer {
        display: block;
    }

    .mobile-copy-layer {
        display: none;
    }

    .apply-hitbox {
        left: 9.4%;
        top: 15.35%;
        width: 14.2%;
        height: 1.55%;
    }
}

@media (max-width: 640px) {
    .tablet-copy-layer {
        display: none;
    }

    .mobile-copy-layer {
        display: block;
    }

    .mobile-steps-carousel {
        position: absolute;
        z-index: 4;
        top: 73.4%;
        left: 0;
        right: 0;
        height: 18.6%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        padding: 0 2.4rem;
        overflow: hidden;
    }

    .carousel-viewport {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .carousel-track {
        display: flex;
        height: 100%;
        width: 100%;
        transition: transform 240ms ease;
        will-change: transform;
    }

    .carousel-slide {
        display: block;
        flex: 0 0 100%;
        min-width: 100%;
        width: 100%;
        height: 100%;
        border: 0;
        user-select: none;
    }

    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 2rem;
        height: 2rem;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: 1.4rem;
        line-height: 2rem;
        text-align: center;
        cursor: pointer;
        z-index: 5;
    }

    .carousel-arrow.prev { left: 0.5rem; }
    .carousel-arrow.next { right: 0.5rem; }

    .carousel-arrow:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .carousel-arrow:focus-visible {
        outline: 2px solid #32ce32;
        outline-offset: 2px;
    }

    .apply-hitbox {
        left: 24.3%;
        top: 16.7%;
        width: 50%;
        height: 1.9%;
        border-radius: 8px;
    }
}