:root {
    --main-color: #0ba14b;
    --button-primary-color: #0ba14b;
    --button-primary-hover-color: #08993f;
    --button-primary-active-color: #078f38;
    --button-danger-color: #dc2626;
    --button-danger-hover-color: #b91c1c;
    --button-disabled-background-color: #e2e8f0;
    --button-disabled-color: #94a3b8;

    --progress-background-color: #e9ecef;
    --progress-color: #2563eb;
    --border-color: #ddd;
}

.progress-container{
    background-color:var(--progress-background-color);
    border-radius:0.25rem;
    overflow:hidden;
    height:24px;
    position:relative;
}
.progress-bar{
    background-color: var(--progress-color);
    height:100%;
    width:0%;
    transition:width 0.6s ease;
}
.progress-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color: white;
    font-size:0.85rem;
}
.progress-goal{
    margin-top:8px;
    font-size:1rem;
}
.progress-goal .raised-amount{
    font-weight:bold;
    font-size:1.25rem;
    color: var(--main-color);
}
.progress-goal .raised-text{
    /* font-style:italic;
    color:#333; */
}
.progress-goal .goal-amount{
    font-weight:bold;
    color: black;
}


.donation-amount-section{
    border:1px solid var(--border-color);
    padding:0 20px 20px 20px;
    border-radius:5px;
    margin-bottom:20px;
}
.donation-amount-title{
    margin-bottom:15px;
}
.donation-options{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:20px;
}
.donation-option{
    display:flex;
    align-items:center;
    border:1px solid var(--border-color);
    border-radius:5px;
    padding:10px 15px;
    background: white;
    cursor:pointer;
    transition:all 0.3s ease;
}
.donation-option:hover{
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.donation-option input[type="radio"]{
    margin-right:8px;
}
.donation-value{
    font-weight:500;
}
.donation-amount-other{
    border-top:1px solid var(--border-color);
    padding-top:15px;
}
.donation-amount-other-title{
    margin-bottom:10px;
    color:#555;
    font-weight:bold;
}
.donation-amount-other input{
    width:200px;
    padding:8px;
    border:1px solid var(--border-color);
    border-radius:5px;
}

.donate-step{margin-bottom:20px;}
.donation-options{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:15px;
}
.donation-option{
    border:1px solid var(--border-color);
    padding:10px 15px;
    border-radius:5px;
    cursor:pointer;
    transition:box-shadow 0.3s ease;
}
.donation-option:hover{
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.donation-option input[type="radio"]{margin-right:8px;}
.form-group{margin-bottom:15px;}
.form-navigation {
    display: flex;
    margin-top: 10px;
    justify-content: flex-end; /* Default: align all buttons to the right */
    gap: 10px; /* Space between buttons if multiple exist */
}

/* If there are two buttons, push the first one to the left */
.form-navigation > button:first-child:nth-last-child(2) {
    margin-right: auto;
}

/* Single button layout (already right-aligned by default) */
/* Optional: Add specific styling if needed for single button case */

/* Base Button Style */
.button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    user-select: none;
}

/* Primary Button */
.button--primary {
    background-color: var(--main-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button--primary:hover {
    background-color: var(--button-primary-hover-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button--primary:active {
    background-color: var(--button-primary-active-color);
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.button--primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Secondary Button */
.button--secondary {
    background-color: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

.button--secondary:hover {
    background-color: #f8fafc;
}

/* Danger Button */
.button--danger {
    background-color: var(--button-danger-color);
    color: white;
}

.button--danger:hover {
    background-color: var(--button-danger-hover-color);
}

/* Disabled State */
.button:disabled {
    background-color: var(--button-disabled-background-color);
    color: var(--button-disabled-color);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Small Button */
.button--sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* Large Button */
.button--lg {
    padding: 16px 32px;
    font-size: 18px;
}

/* Full-width Button */
.button--block {
    display: block;
}

/* Form groups */
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    box-sizing: border-box;
}
.form-group textarea {
    resize: vertical;
}

/* Navigation buttons */
.form-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}
.form-navigation button {
    flex: 1;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background .2s;
}