/* Add custom CSS here, it will not be overwritten by product updates */

/* Reset white canvas backgrounds */
html, body, #pCanvas, #mainCanvas, .canvas-container {
    background: transparent !important;
}

/* Apply custom image to the main background wrapper */
body {
    background-image: url('jrlportalbakground.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
/* Top 45% solid navy blue, gradually lightens from 45% to 65%, with high transparency at Password */
#divcenter, .panel.gauche {
    background-image: linear-gradient(
        to bottom, 
        rgba(10, 25, 47, 1.00) 0%,     /* Top logo area: Solid deep Navy Blue */
        rgba(10, 25, 47, 1.00) 45%,    /* Holds solid navy blue up to 45% */
        rgba(26, 75, 140, 0.70) 55%,   /* 45% to 65%: Gradually lightens to a classic blue */
        rgba(72, 198, 239, 0.20) 65%,  /* At 65% (Password area): High transparency transition */
        rgba(0, 0, 0, 0.00) 90%,       /* Below inputs / HTML5 level: Fully transparent */
        rgba(0, 0, 0, 0.00) 100%      /* Bottom: Completely clear */
    ) !important;
    background-color: transparent !important;

    /* Fixes rough transparency rendering in Chrome / Edge */
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-transform: translateZ(0); /* Forces Chrome GPU hardware acceleration */
}

/* Crisp text & placeholder styling for readability */
#divcenter label, #divcenter span, #divcenter .title, #divcenter div, #divcenter input::placeholder {
    color: #FFFFFF !important;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.9);
}
/* 1. Centered Sun (Top Middle - Scaled 30% Larger to 104px) */
.sun-container {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);       /* Keep centered horizontally */
    -webkit-transform: translateX(-50%);
    width: 104px;                      /* 30% size increase (was 80px) */
    height: 104px;                     /* 30% size increase (was 80px) */
    z-index: 100;
    pointer-events: none;
}

.animated-sun {
    width: 100%;
    height: 100%;
    display: block;
    animation: floatSun 4s ease-in-out infinite alternate;
    -webkit-animation: floatSun 4s ease-in-out infinite alternate;
}

/* 2. Rotating Sun Rays */
.sun-rays {
    transform-origin: 50px 50px;       /* Center origin matching SVG viewBox */
    -webkit-transform-origin: 50px 50px;
    animation: rotateRays 12s linear infinite;
    -webkit-animation: rotateRays 12s linear infinite;
}

/* 3. Winking/Blinking Eyes */
.sun-eye {
    transform-origin: center;
    -webkit-transform-origin: center;
    animation: blinkEye 4s infinite;
    -webkit-animation: blinkEye 4s infinite;
}

/* Keyframe Animations */
@keyframes floatSun {
    0%   { transform: translateX(-50%) translateY(0px) scale(1); }
    100% { transform: translateX(-50%) translateY(-8px) scale(1.03); }
}
@-webkit-keyframes floatSun {
    0%   { -webkit-transform: translateX(-50%) translateY(0px) scale(1); }
    100% { -webkit-transform: translateX(-50%) translateY(-8px) scale(1.03); }
}

@keyframes rotateRays {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@-webkit-keyframes rotateRays {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}

@keyframes blinkEye {
    0%, 90%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(0.1); }
}
@-webkit-keyframes blinkEye {
    0%, 90%, 100% { -webkit-transform: scaleY(1); }
    95%           { transform: scaleY(0.1); }
}

/* 4. Left Panel Styling & Overflow Lock */
#divcenter, .panel.gauche {
    background-image: linear-gradient(
        to bottom, 
        rgba(10, 25, 47, 1.00) 0%,     
        rgba(10, 25, 47, 1.00) 45%,    
        rgba(26, 75, 140, 0.70) 55%,   
        rgba(72, 198, 239, 0.20) 65%,  
        rgba(0, 0, 0, 0.00) 90%,       
        rgba(0, 0, 0, 0.00) 100%      
    ) !important;
    background-color: transparent !important;
    overflow: hidden !important;
    max-height: 100vh !important;
    box-sizing: border-box !important;
}

/* Text Readability */
#divcenter label, #divcenter span, #divcenter .title, #divcenter div, #divcenter input::placeholder {
    color: #FFFFFF !important;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.9);
}