.donate-stuff html, body {
    overflow-x: hidden !important;
}

.sign-in-form-card {
    border: 1px solid #F3F4F6;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.08);
    margin-right: auto !important;
    max-width: 560px;
    padding: 50px;
}

.sign-in-form-heading {
    color: #015DAB;
}

.sign-in-pickups {
    color:#02A950;
}

.sign-up-form-heading {
       color: #015DAB;
}

.join-thousands-heading {
    color:#02A950;
}

.form-note {
    font-size: 12px;
}


/* --- Feature Cards Section Styling --- */

.feature-cards-section {
    position: relative !important;
    padding: 20px !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 1 !important;
}

.feature-cards-container {
    position: relative !important;
    z-index: 2 !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 500px !important;
}

/* Floating Background Blobs */
.blur-blob {
    position: absolute !important;
    width: 335px !important;
    height: 335px !important;
    border-radius: 335px !important;
    background: rgba(0, 85, 165, 0.25) !important; 
    filter: blur(150px) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.blur-blob.blob-bottom {
    background: rgba(2, 169, 80, 0.25) !important;
    bottom: 20px !important;
    left: 120px !important;
}

.blob-top {
    top: -50px !important;
    right: 30px !important;
}


/* Individual Card Styling */
.feature-card {
    background: #ffffff !important;
    border-radius: 15px !important;
    padding: 25px 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
    text-align: left !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s ease !important;
}

.feature-card:hover {
    transform: translateY(-5px) !important;
}

.feature-card-icon {
    /* 1. This prevents the container from squishing the icon */
    flex-shrink: 0 !important;
    
    /* 2. Ensure the container matches the intended image width */
    width: 35px !important;
    
    /* 3. Optional: Ensure the icon stays at the top if text is long */
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* Icon Sizing */
.feature-card-icon img {
 width: 35px !important;
    height: auto !important;
    display: block !important;
}


/* Text Styling */
.feature-card-text h3 {
    margin: 0 0 5px 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a2b3c !important;
}

.feature-card-text p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

/* Responsive fix for smaller phones */
@media (max-width: 480px) {
    .feature-card {
        padding: 20px !important;
        gap: 15px !important;
    }
    .feature-card-text h3 {
        font-size: 18px !important;
    }
}



/*--- ART START HERE FOR ALL PLACEHOLDER STYLING ---*/

/*SIGN IN FORM PLACEHOLDER*/

/* Container sizing */
.signin-container {
    max-width: 450px !important;
}

.signin-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

/* Label Styling */
.form-group label {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #64748b !important; 
    margin-bottom: 8px !important;
}

/* Label Row for Password + Forgot Link */
.label-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.forgot-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #015dab;
    text-decoration: none !important;
}

.forgot-link:hover {
    color:#02A950 !important;
}

/* Input Styling */
.form-group input {
    width: 100% !important;
    padding: 15px 20px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 15px !important;
    font-size: 16px !important;
    background-color: #ffffff !important;
    color: #1a2b3c !important;
    box-sizing: border-box !important;
}

.form-group input::placeholder {
    color: #94a3b8 !important;
}

/* Password Wrapper & Icon */
.password-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* Green Button Styling */
.btn-signin {
    background-color: #02A950 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 18px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: background 0.3s ease !important;
}

.btn-signin:hover {
    background-color: #1e833a !important;
}

/* Footer Text */
.form-footer {
    text-align: center !important;
    font-size: 16px !important;
    color: #64748b !important;
}

.form-footer a {
    color: #015dab !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.form-footer a:hover {
    color: #02A950 !important;
}

/*END SIGN IN FORM PLACEHOLDER*/




/* --- [psp_my_account] SIGN IN FIELDS --- */

/* 1. Force the plugin's internal wrappers to fill your container */
#donate-psp-login-form .ds-fe-flex-wrap, 
#donate-psp-login-form .ds-fe-flex-column,
#donate-psp-login-form span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Style the Labels */
#donate-psp-login-form label {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

/* 3. Style the Input Fields (Email & Password) */
#donate-psp-login-form input[type="email"],
#donate-psp-login-form input[type="password"],
#donate-psp-login-form input[type="text"] {
    width: 100% !important; /* This now fills your container's width */
    padding: 15px 20px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 15px !important;
    font-size: 16px !important;
    background-color: #ffffff !important;
    color: #1a2b3c !important;
    box-sizing: border-box !important; /* Critical to prevent padding overflow */
    margin-bottom: 20px !important;
    display: block !important;
}

/* 4. The Submit Button */
#psp-login-submit {
    width: 100% !important;
    background-color: #02A950 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 18px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
}

#psp-login-submit:hover {
    background-color: #1e833a !important;
}

/* 5. Forgot Password Link */
.psp-forgot-pass-link {
    display: block !important;
    text-align: center !important;
    margin-top: 15px !important;
    font-size: 14px !important;
    color: #015dab !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.psp-forgot-pass-link:hover {
    color:#02A950 !important;
}

/* --- END [psp_my_account] SIGN IN FIELDS --- */

.sign-up-form-card {

    border: 1px solid #F3F4F6;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.08);
    margin-right: auto !important;
    max-width: 690px;
    padding: 50px;
}



/* --- CREATE ACCOUNT FORM PLACEHOLDER --- */
.signup-form {
    width: 100% !important;
    /* max-width: 500px !important; */
    margin: 0 0 auto !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.form-row {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
}

.form-row .form-group {
    flex: 1 !important;
}

/* Typography for labels and footer text */
.form-group label {
    font-weight: 700 !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.form-footer {
    text-align: center !important;
    margin-top: 20px !important;
    color: #64748b !important;
}

.label-text a:hover {
    color:#02A950 !important;
}


/* --- Fix for shrinking checkboxes - Art if you comment this out you will see what is going on here. --- */
.custom-checkbox input[type="checkbox"] {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important; 
}

/* mobile responsiveness */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* --- END CREATE ACCOUNT FORM PLACEHOLDER --- */

/*--- ART END HERE FOR ALL PLACEHOLDER STYLING ---*/

/* --- Testimonial Wall Fix --- */

.testimonial-wall {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    /* CRITICAL FIX: Creates a container for z-index: -1 elements */
    position: relative !important;
    z-index: 1 !important; 
    /* overflow: hidden !important;  */
    overflow: visible !important; 
}

.testimonial-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    max-width: 800px;
    position: relative !important;
    z-index: 2 !important; /* Ensures text stays above blobs */
    padding: 0 20px; /* Moves the padding here so cards don't hit screen edges */
}

/* --- Base Blob Styling --- */
.blur-blob {
    position: absolute !important;
    width: 335px !important;
    height: 335px !important;
    border-radius: 50% !important;
    background: rgba(0, 85, 165, 0.25) !important; /* Blue */
    filter: blur(150px) !important;
    -webkit-filter: blur(150px) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    will-change: filter; /* Helps browser performance */
}

/* --- Specific Blob Positions (Covering 6 Cards) --- */
.blob-top { top: -50px !important; right: 30px !important; }

.blob-bottom { 
    background: rgba(2, 169, 80, 0.25) !important; /* Green */
    bottom: 20px !important; 
    left: 120px !important; 
}

.blob-mid-1 { 
    top: 20% !important; 
    left: 160px !important; 
}

.blob-mid-2 { 
    top: 40% !important; 
    right: -100px !important; 
    background: rgba(2, 169, 80, 0.25) !important; 
}

.blob-mid-3 { 
    top: 60% !important; 
    left: 210px !important; 
}

.blob-mid-4 { 
    top: 80% !important; 
    right: 150px !important; 
    background: rgba(2, 169, 80, 0.25) !important; 
}

/* Adjusting blob positions so they peek but don't cause massive scroll */
.blur-blob.pos-1 { 
    left: -50px !important; 
}
.blur-blob.pos-2 { 
    right: -50px !important; 
}
.blur-blob.pos-5 { 
    left: -30px !important; 
}
.blur-blob.pos-6 { 
    right: -30px !important; 
}

/* --- Quote Cards --- */
.quote-card {
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    max-width: 460px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
    cursor: default;
}

/* Hover State */
.quote-card:hover {
    z-index: 10 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

/* Fonts per specs */
.quote-text {
    color: #27272A !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 22.75px !important;
    margin-bottom: 12px !important;
}

.quote-name {
    color: #71717A !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
}

.quote-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quote-stars {
    color: #02a950;
    font-size: 14px;
    letter-spacing: 1px;
}

/* --- Scatter Effect --- */
.quote-card:nth-child(odd) { align-self: flex-start; transform: rotate(-1deg); }
.quote-card:nth-child(even) { align-self: flex-end; transform: rotate(1.2deg); }

.quote-card:nth-child(1) { margin-left: 20px; }
.quote-card:nth-child(3) { margin-left: 50px; transform: rotate(-0.5deg); }
.quote-card:nth-child(4) { margin-right: 40px; }
.quote-card:nth-child(6) { margin-right: 15px; transform: rotate(0.8deg); }

/* Hover Maintenance of Rotation */
.quote-card:nth-child(odd):hover { transform: translateY(-10px) scale(1.03) rotate(-1deg) !important; }
.quote-card:nth-child(even):hover { transform: translateY(-10px) scale(1.03) rotate(1.2deg) !important; }
.quote-card:nth-child(3):hover { transform: translateY(-10px) scale(1.03) rotate(-0.5deg) !important; }
.quote-card:nth-child(6):hover { transform: translateY(-10px) scale(1.03) rotate(0.8deg) !important; }

@media (max-width: 768px) {
    .quote-card {
        max-width: 100% !important;
        align-self: center !important;
        transform: none !important;
        margin: 0 !important;
    }
}