/* Charity Fundraiser Scale Styles */

.cfs-progress-bar-container {
    width: 100%;
    height: 40px;
    background-color: #e9ecef;
    border-radius: 20px;
    border: 1px solid #ced4da;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    margin: 20px 0;
    position: relative; /* Needed for absolute positioning of the icon */
}

.cfs-progress-bar-inner {
    height: 100%;
    background-color: #28a745;
    /* This will apply the repeating background image if one is set */
    background-repeat: repeat;
    background-size: auto;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.6s ease;
    white-space: nowrap;
    position: relative; /* Needed for icon positioning */
}

.cfs-percentage-text {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 0 15px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    z-index: 2; /* Ensures text is on top of any background image */
}

.cfs-tip-icon {
    position: absolute;
    right: -25px; /* Positions the icon just outside the tip */
    top: 50%;
    transform: translateY(-50%); /* Vertically centers the icon */
    width: 50px; /* Icon size */
    height: 50px; /* Icon size */
    background-color: #fff;
    border: 3px solid #28a745; /* Border color matches the progress bar */
    border-radius: 50%; /* Makes it round */
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 10;
}