/* ========================================
   UI BACKGROUND SHAPES COMPONENT
   SVG-based decorative page background
   ======================================== */

.bg-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* Large illustrated figure — centered-left, rotated, lower half of page */
.bg-figure {
    position: absolute;
    width: 788.93px;
    height: auto;
    left: calc(50% - 873.765px);
    top: calc(50% - 20.36px);
    transform: rotate(16deg);
}

/* Cross effects — base styles */
.bg-effect {
    position: absolute;
}

/* Light blue cross (#3BBAFA, 29px) — same on all pages */
.bg-effect-3 {
    left: 75.42%;
    top: 16.99%;
    width: 29px;
    height: 29px;
}

/* Orange cross (#F4991F, 22px) — authenticated pages (Figma: dashboard/questionnaire) */
.bg-effect-2 {
    left: 84.24%;
    top: 25.49%;
    width: 22px;
    height: 22px;
}

/* Blue cross (#0074E5, 20px) — authenticated pages (Figma: dashboard/questionnaire) */
.bg-effect-1 {
    left: 23.4%;
    top: 48.83%;
    width: 20px;
    height: 20px;
}

/* Login page overrides — unauthenticated positions */
.page-auth .bg-effect-2 {
    left: 69.31%;
    top: 25.49%;
}

.page-auth .bg-effect-1 {
    left: 18.26%;
    top: 19.82%;
}