/*
 Theme Name:   Astra Child
 Theme URI:    http://example.com/astra-child
 Description:  Astra Child Theme
 Author:       Your Name
 Template:     astra
 Version:      2.0.0

==========================
  Fundraiser Single Page Styles
==========================

Browser fixes included:
- min-width:0 on flex containers to fix Safari stretching issues
- flex-wrap and flex-basis adjustments for consistent card layout
- responsive adjustments for tablets and mobile
*/

.fundraiser-single-page {
    max-width: 1200px;
    margin: 150px auto 0 auto; /* added 150px top margin */
    padding: 40px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fundraiser-heading {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

/* Columns container */
.fundraiser-columns {
    display: flex;
    flex-wrap: nowrap; /* prevent column 2 dropping */
    gap: 20px;
    margin-bottom: 30px;
    min-width: 0; /* Safari fix for nested flex */
}

/* Image */
.fundraiser-image {
    flex: 0 0 300px;
}

.fundraiser-image img {
    width: 100%;
    height: auto; /* ensures full image visible */
    object-fit: contain; /* avoids clipping */
    border-radius: 10px;
}

/* Details */
.fundraiser-details {
    flex: 1 1 auto;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0; /* Safari fix */
}

.fundraiser-details p {
    margin: 10px 0;
    font-size: 1rem;
}

/* Donate button */
.fundraiser-donate-button {
    display: inline-block;
    width: auto;           
    max-width: 160px;      
    height: 30px;          
    line-height: 30px;     
    padding: 0 20px;       
    background-color: #007bff; 
    color: #fff;
    text-decoration: none;
    font-weight: bold;     
    font-size: 0.95rem;
    border-radius: 6px;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s;
    box-sizing: border-box;
}

.fundraiser-donate-button:hover {
    background-color: #0056b3; 
    transform: scale(1.05);
}

.fundraiser-description {
    font-size: 1rem;
    flex: 1 1 auto; /* ensures it uses available space */
}

/* Progress Bar */
.fundraiser-progress-wrapper {
    margin-top: auto;
    width: 100%;
    max-width: 800px;
    min-width: 0; /* Safari fix */
}

.progress-bar-bg {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 30px;
    background: #ddd;
    border-radius: 15px;
    overflow: visible;
}

.progress-fill-goal {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #28a745;
    border-radius: 15px 0 0 15px;
    z-index: 1;
    animation: fillGoal 1.3s cubic-bezier(0.55, 0.05, 0.36, 1.25) forwards;
}

.progress-fill-over {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: gold;
    border-radius: 0 15px 15px 0;
    z-index: 2;
    animation: fillOver 1.2s cubic-bezier(0.55, 0.05, 0.36, 1.25) forwards;
    animation-delay: 1.3s;
}

@keyframes fillGoal {
    from { width: 0; }
    to { width: var(--goal-width, 0%); }
}

@keyframes fillOver {
    from { width: 0; }
    to { width: var(--over-width, 0%); }
}

.progress-goal-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #000;
    z-index: 3;
    transform: translateX(-50%);
}

.progress-label-zero,
.progress-label-raised,
.progress-goal-label {
    position: absolute;
    z-index: 10;
    font-weight: normal;
    font-size: 0.8rem;
}

.progress-label-zero {
    left: 0;
    top: -30px;
}

.progress-label-raised {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
}

.progress-label-raised.amount-overlap-gold {
    color: #000;
}

.progress-goal-label {
    top: -45px;
    font-size: 0.8rem;
    color: #000;
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
    transform: translateX(-50%);
}

.progress-goal-label::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
}

.progress-goal-label.hide-arrow::after {
    display: none;
}

.progress-percentage {
    margin-top: 5px;
    font-size: 0.8rem;
    text-align: right;
}

/* Responsive */
@media (max-width: 1024px) {
    .fundraiser-columns {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .fundraiser-columns {
        flex-direction: column;
    }
    .fundraiser-image, .fundraiser-details {
        flex: 1 1 100%;
    }
    .fundraiser-progress-wrapper {
        max-width: 100%;
    }
    .fundraiser-donate-button {
        width: auto;  
        text-align: center;
    }
    .progress-label-raised {
        left: 50% !important;
        transform: translate(-50%, -50%);
    }
}