/* effects for selection */
.page-id-64318 .main-header {
    width: 100% !important;
    padding: 0 !important;
    background: #292d36 !important;
}

.crs-checker-container {
    margin-top: 121px !important;
}

/* Celebration Animation Styles */
.demo-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    transform: translate(0) !important;
}

.celebration {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Ensure result content appears above animation */
#crs-result {
    position: relative;
    z-index: 2;
    min-height: 400px;
}

#crs-result-container {
    position: relative;
}

/* Icon Size Styling */
.crs-result-icon {
    display: block;
    margin: 0px auto !important;
    text-align: center;
}

.dashicons {
    vertical-align: middle;
    line-height: 1;
}

.crs-emoji-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 60px; /* Default large size */
}

#crs-result img {
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Make sure result container has enough space for larger icons */
#crs-result {
    min-height: 500px !important; /* Increased from 400px */
}

/* Icon wrapper to ensure proper centering */
.crs-result-icon {
    margin-bottom: 0px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#crs-result h3{
margin-top:20px !important;
}
/* Paper pieces */
.paper {
    position: absolute !important;
    opacity: 0;
    z-index: 3;
    pointer-events: none !important;
}

/* Paper animations with prefixes */
@keyframes paperFall1 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(500px) translateX(20px) rotate(180deg) scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes paperFall1 {
    0% {
        -webkit-transform: translateY(0) translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(500px) translateX(20px) rotate(180deg) scale(1);
        opacity: 0;
    }
}

@keyframes paperFall2 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(250px) translateX(40px) rotate(90deg) scale(1);
    }
    100% {
        transform: translateY(500px) translateX(-20px) rotate(180deg) scale(0.9);
        opacity: 0;
    }
}

@-webkit-keyframes paperFall2 {
    0% {
        -webkit-transform: translateY(0) translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        -webkit-transform: translateY(250px) translateX(40px) rotate(90deg) scale(1);
    }
    100% {
        -webkit-transform: translateY(500px) translateX(-20px) rotate(180deg) scale(0.9);
        opacity: 0;
    }
}

@keyframes paperFall3 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.7);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(450px) translateX(80px) rotate(360deg) scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes paperFall3 {
    0% {
        -webkit-transform: translateY(0) translateX(0) rotate(0deg) scale(0.7);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(450px) translateX(80px) rotate(360deg) scale(1);
        opacity: 0;
    }
}

/* Streamers */
.streamer {
    position: absolute !important;
    height: 4px;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform-origin: left center;
    opacity: 0;
    z-index: 4;
    pointer-events: none !important;
}

@keyframes streamerTwirl {
    0% {
        transform: rotate(0deg) scaleX(0);
        opacity: 0;
        width: 0;
    }
    20% {
        opacity: 0.9;
        width: 120px;
    }
    80% {
        opacity: 0.7;
    }
    100% {
        transform: rotate(720deg) scaleX(0);
        opacity: 0;
        width: 0;
    }
}

@-webkit-keyframes streamerTwirl {
    0% {
        -webkit-transform: rotate(0deg) scaleX(0);
        opacity: 0;
        width: 0;
    }
    20% {
        opacity: 0.9;
        width: 120px;
    }
    80% {
        opacity: 0.7;
    }
    100% {
        -webkit-transform: rotate(720deg) scaleX(0);
        opacity: 0;
        width: 0;
    }
}

/* Confetti */
.confetti {
    position: absolute !important;
    width: 6px;
    height: 6px;
    background-color: #f44336;
    top: -20px;
    opacity: 0;
    z-index: 5;
    pointer-events: none !important;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        transform: translateY(500px) rotate(180deg) scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes confettiFall {
    0% {
        -webkit-transform: translateY(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(500px) rotate(180deg) scale(1);
        opacity: 0;
    }
}

/* Hide animation container by default */
.demo-container:empty {
    display: none;
}

/* Streamer colors */
.streamer.red { 
    background: linear-gradient(90deg, #ff5252, #ff8a80) !important; 
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.5) !important;
}
.streamer.blue { 
    background: linear-gradient(90deg, #448aff, #82b1ff) !important; 
    box-shadow: 0 0 6px rgba(68, 138, 255, 0.5) !important;
}
.streamer.gold { 
    background: linear-gradient(90deg, #ffd700, #ffecb3) !important; 
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
}

/* Fix for paper colors */
.paper.circle.red { background-color: #ff5252 !important; }
.paper.circle.blue { background-color: #448aff !important; }
.paper.circle.green { background-color: #4caf50 !important; }
.paper.circle.yellow { background-color: #ffeb3b !important; }
.paper.circle.purple { background-color: #9c27b0 !important; }
.paper.circle.orange { background-color: #ff9800 !important; }
.paper.circle.pink { background-color: #e91e63 !important; }

.paper.square.red { background-color: #ff5252 !important; }
.paper.square.blue { background-color: #448aff !important; }
.paper.square.green { background-color: #4caf50 !important; }
.paper.square.yellow { background-color: #ffeb3b !important; }
.paper.square.purple { background-color: #9c27b0 !important; }
.paper.square.orange { background-color: #ff9800 !important; }
.paper.square.pink { background-color: #e91e63 !important; }

/* Fix for triangle */
.paper.triangle {
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
    border-left: solid transparent !important;
    border-right: solid transparent !important;
    border-bottom-style: solid !important;
}

.paper.triangle.red { border-bottom-color: #ff5252 !important; }
.paper.triangle.blue { border-bottom-color: #448aff !important; }
.paper.triangle.green { border-bottom-color: #4caf50 !important; }
.paper.triangle.yellow { border-bottom-color: #ffeb3b !important; }
.paper.triangle.purple { border-bottom-color: #9c27b0 !important; }
.paper.triangle.orange { border-bottom-color: #ff9800 !important; }
.paper.triangle.pink { border-bottom-color: #e91e63 !important; }

/* Fix for diamond */
.paper.diamond {
    transform: rotate(45deg) !important;
}

.paper.diamond.red { background-color: #ff5252 !important; }
.paper.diamond.blue { background-color: #448aff !important; }
.paper.diamond.green { background-color: #4caf50 !important; }
.paper.diamond.yellow { background-color: #ffeb3b !important; }
.paper.diamond.purple { background-color: #9c27b0 !important; }
.paper.diamond.orange { background-color: #ff9800 !important; }
.paper.diamond.pink { background-color: #e91e63 !important; }