.elementor-43832 .elementor-element.elementor-element-4b46ede6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-43832 .elementor-element.elementor-element-4eecb8f{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-43832 .elementor-element.elementor-element-7613f067{--display:flex;--justify-content:center;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-43832 .elementor-element.elementor-element-7613f067:not(.elementor-motion-effects-element-type-background), .elementor-43832 .elementor-element.elementor-element-7613f067 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-43832 .elementor-element.elementor-element-130a2a8{--spacer-size:50px;}.elementor-43832 .elementor-element.elementor-element-4d42d2f img{width:200px;}.elementor-43832 .elementor-element.elementor-element-36cd7a3b{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-43832 .elementor-element.elementor-element-4ae29ffc{--display:flex;}.elementor-43832 .elementor-element.elementor-element-7411498e .elementor-button{background-color:#FF7800;border-radius:5px 5px 5px 5px;}.elementor-43832 .elementor-element.elementor-element-7411498e .elementor-button:hover, .elementor-43832 .elementor-element.elementor-element-7411498e .elementor-button:focus{background-color:#D67824;}.elementor-43832 .elementor-element.elementor-element-6186fe07 .elementor-button{background-color:#FF7800;border-radius:5px 5px 5px 5px;}.elementor-43832 .elementor-element.elementor-element-6186fe07 .elementor-button:hover, .elementor-43832 .elementor-element.elementor-element-6186fe07 .elementor-button:focus{background-color:#D67824;}.elementor-43832 .elementor-element.elementor-element-77b4383c .elementor-button{background-color:#FF7800;border-radius:5px 5px 5px 5px;}.elementor-43832 .elementor-element.elementor-element-77b4383c .elementor-button:hover, .elementor-43832 .elementor-element.elementor-element-77b4383c .elementor-button:focus{background-color:#D67824;}.elementor-43832 .elementor-element.elementor-element-24c32a58 .elementor-button{background-color:#FF7800;border-radius:5px 5px 5px 5px;}.elementor-43832 .elementor-element.elementor-element-24c32a58 .elementor-button:hover, .elementor-43832 .elementor-element.elementor-element-24c32a58 .elementor-button:focus{background-color:#D67824;}.elementor-43832 .elementor-element.elementor-element-e744a9b .elementor-button{background-color:#FF7800;border-radius:5px 5px 5px 5px;}.elementor-43832 .elementor-element.elementor-element-e744a9b .elementor-button:hover, .elementor-43832 .elementor-element.elementor-element-e744a9b .elementor-button:focus{background-color:#D67824;}.elementor-43832 .elementor-element.elementor-element-5ad8122d{text-align:center;}.elementor-43832 .elementor-element.elementor-element-5ad8122d a{color:var( --e-global-color-3f68a9d );}.elementor-43832 .elementor-element.elementor-element-1ee6c07{--spacer-size:50px;}@media(min-width:768px){.elementor-43832 .elementor-element.elementor-element-7613f067{--width:60%;}.elementor-43832 .elementor-element.elementor-element-36cd7a3b{--width:100%;}.elementor-43832 .elementor-element.elementor-element-4ae29ffc{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-57fc0626 *//* Custom CSS for Donation Tracker Widget */

/* Import Google Font - essential for the font to work! */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Elementor often wraps widgets, so we target the widget container directly
   and apply font-family and centering to it. */
.donation-widget {
    font-family: 'Montserrat', sans-serif; /* Apply font to the whole widget */
    text-align: center; /* Center all text content within the widget */
    max-width: 600px; /* Optional: Limit widget width for better presentation */
    margin: 0px auto; /* Optional: Center the widget on the page */
    padding: 0px; /* Optional: Add some internal spacing */
    
    border-radius: 10px; /* Optional: Rounded corners for the widget box */

}

.donation-widget #progressBarContainer {
    width: 90%;
    background-color: #F0C8A5; /* Light purple */
    border-radius: 8px;
    margin: 30px auto 5px auto; /* Adjusted margin-bottom to make space for labels */
    height: 35px; /* Taller bar */
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* Inner shadow for depth */
}

.donation-widget #progressBar {
    height: 100%;
    width: 0%; /* Will be updated by JS */
    background-color: #ff7700; /* Dark purple */
    background-size: 1rem 1rem;
    text-align: center;
    line-height: 35px; /* Vertically center text */
    color: #fff; /* White text for collected amount */
    font-weight: 700;
    transition: width 1s ease-in-out, background-color 0.5s ease; /* Smooth animation */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center; /* Default center, JS will adjust for small percentages */
    white-space: nowrap; /* Prevent collected amount from wrapping */
    box-sizing: border-box;
    padding: 0 10px; /* Add some padding inside the bar */
    font-size: 1.1em; /* Adjust font size for current amount inside bar */
}

/* Styles for the labels below the progress bar */
.donation-widget .progress-labels {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto; /* Align with progress bar container */
    padding: 5px 0;
}

.donation-widget .progress-labels span {
    font-size: 1em;
    color: #333;
    font-weight: 400;
}

.donation-widget .progress-label-left {
    text-align: left;
}

.donation-widget .progress-label-right {
    text-align: right;
}

/* Loader animation */
.donation-widget .loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #FF7800; /* Dark purple */
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
    display: inline-block; /* Keep it in line with text */
    vertical-align: middle; /* Align with text */
    margin-left: 8px; /* Space from text */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading/Error states */
.donation-widget .loading #goalAmountLabel {
    color: gray;
}

.donation-widget .loading #progressBar {
    background-color: #ccc;
    background-image: none;
    color: #555;
}

.donation-widget .error {
    color: red !important;
    font-weight: bold;
}

.donation-widget #progressBar.error {
    background-color: #dc3545;
    color: #fff;
    width: 100%;
    justify-content: center;
    padding: 0 10px;
}/* End custom CSS */