/* ============================================
   DONATION PAGE SPECIFIC MOBILE FIXES
   ============================================ */

/* Fix for donation form on mobile */
@media (max-width: 768px) {
    .donation-wrapper {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    .donation-form-wrapper {
        order: 1;
        width: 100%;
    }
    
    .donation-sidebar {
        order: 2;
        width: 100%;
    }
    
    /* Fix input boxes on mobile */
    .donation-form-wrapper .form-group input,
    .donation-form-wrapper .form-group select,
    .donation-form-wrapper .form-group textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Fix select dropdown on mobile */
    .donation-form-wrapper .form-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 40px !important;
        background-size: 12px !important;
    }
    
    /* Fix amount input */
    .donation-form-wrapper #amount {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix payment method radio buttons on mobile */
    .payment-methods {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .payment-method {
        width: 100% !important;
        min-width: auto !important;
    }
    
    .payment-method label {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .donation-form-wrapper .form-group input,
    .donation-form-wrapper .form-group select,
    .donation-form-wrapper .form-group textarea {
        padding: 10px 12px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    
    .donation-form-wrapper .form-group select {
        padding-right: 36px !important;
        background-position: right 12px center !important;
    }
    
    .amount-presets {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    
    .amount-preset {
        padding: 6px 8px !important;
        font-size: 11px !important;
        text-align: center !important;
        width: 100% !important;
        min-width: auto !important;
    }
    
    .donation-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .impact-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .donation-form-wrapper .form-group input,
    .donation-form-wrapper .form-group select,
    .donation-form-wrapper .form-group textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}

/* Fix for Android Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .donation-form-wrapper .form-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 40px !important;
    }
}