/* Base styles */ :root {
    --primary: #3a7bd5; --primary-dark: #2c65b1; --secondary: #ff9f43; --dark: #1e272e; --light: #f5f6fa; --success: #2ecc71; --danger: #e74c3c; 
    --warning: #f39c12; --gray: #95a5a6; --dark-gray: #2c3e50;
} * {
    margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: #f4f7f9; color: var(--dark); line-height: 
    1.6; min-height: 100vh; display: flex; flex-direction: column;
} /* Header and navigation */ header {
    background: linear-gradient(90deg, #1e272e 0%, #2d3436 100%); display: flex; justify-content: space-between; align-items: center; padding: 1rem 
    2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} .logo img {
    height: 50px; } .main-nav ul { display: flex; list-style: none; gap: 1.5rem; } .main-nav a { color: white; text-decoration: none; font-weight: 500; 
    padding: 0.5rem 0.75rem; border-radius: 4px; transition: all 0.3s ease;
} .main-nav a:hover {
    background: rgba(255, 255, 255, 0.1); } .main-nav a.active { background: rgba(255, 255, 255, 0.2); font-weight: 600; } /* Main content */ main { 
    flex: 1; padding: 3rem 1rem;
} .container {
    max-width: 900px; margin: 0 auto; } .donation-card { background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 
    2rem;
} h1 {
    text-align: center; margin-bottom: 1.5rem; color: var(--dark); } h2 { font-size: 1.25rem; margin-bottom: 1.25rem; color: var(--dark); } 
.info-banner {
    display: flex; align-items: flex-start; background: #f0f8ff; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid 
    var(--primary);
} .info-banner i {
    color: var(--primary); font-size: 1.25rem; margin-right: 0.75rem; margin-top: 0.2rem; } .banner-content { flex: 1; } .info-banner p { font-weight: 
    600; color: var(--dark);
} .banner-link {
    font-size: 0.85rem; font-weight: normal; margin-top: 0.5rem; } .banner-link a { color: var(--primary-dark); text-decoration: underline; } 
.banner-link a:hover {
    text-decoration: none; } .notice-banner { display: flex; align-items: flex-start; background: #fff8e1; padding: 1rem; border-radius: 8px; 
    margin-bottom: 2rem; border-left: 4px solid var(--warning);
} .notice-banner i {
    color: var(--warning); font-size: 1.25rem; margin-right: 0.75rem; margin-top: 0.2rem; } .notice-banner p { color: var(--dark); margin-bottom: 
    0.5rem;
} .notice-banner p:last-child {
    margin-bottom: 0; } /* Amount section */ .amount-section, .details-section, .payment-section, .order-summary { margin-bottom: 2rem; padding-bottom: 
    2rem; border-bottom: 1px solid #eee;
} .order-summary {
    border-bottom: none; margin-bottom: 1rem; } .quick-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 
    0.75rem; margin-bottom: 1.5rem;
} .quick-amount {
    background: #f5f6fa; border: 2px solid #e2e8f0; border-radius: 6px; padding: 0.75rem; font-weight: 600; font-size: 1rem; color: var(--dark); 
    cursor: pointer; transition: all 0.2s ease;
} .quick-amount:hover {
    background: #e2e8f0; } .quick-amount.selected { background: var(--primary); color: white; border-color: var(--primary); } .custom-amount { 
    margin-bottom: 1.5rem;
} .custom-amount label {
    display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--dark-gray); } .amount-input { position: relative; display: flex; align-items: 
    center;
} .currency-symbol {
    position: absolute; left: 1rem; color: var(--dark-gray); font-weight: 600; } .amount-input input { width: 100%; padding: 0.75rem 0.75rem 0.75rem 
    2rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;
} .credits-preview {
    background: #f8f9fa; padding: 1rem; border-radius: 6px; text-align: center; border: 1px dashed #ddd; } .credits-preview p { font-size: 1.1rem; 
    color: var(--dark);
} .credits-preview strong {
    color: var(--primary); } /* Form styles */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; margin-bottom: 0.5rem; 
    font-weight: 500; color: var(--dark-gray);
} .form-group input {
    width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .form-help { display: flex; align-items: center; gap: 
    0.5rem; color: var(--gray); font-size: 0.85rem; margin-top: 0.25rem;
} .form-help a {
    color: var(--primary); text-decoration: underline; } .form-help a:hover { text-decoration: none; } /* Payment methods */ .fee-note { margin-bottom: 
    0.5rem; color: var(--dark-gray);
} .fee-explanation {
    margin-bottom: 1rem; color: var(--dark); font-size: 0.9rem; background: #f0f8ff; padding: 0.5rem 0.75rem; border-radius: 4px; border-left: 3px 
    solid var(--primary);
} .payment-methods {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; } .payment-method { display: flex; flex-direction: 
    column; align-items: center; justify-content: center; padding: 1rem 0.5rem; border: 2px solid #e2e8f0; border-radius: 6px; cursor: pointer; 
    transition: all 0.2s ease; position: relative;
} .payment-method i {
    font-size: 1.5rem; margin-bottom: 0.5rem; } .payment-method:hover { background: #f8f9fa; } .payment-method.selected { border-color: var(--primary); 
    background: rgba(58, 123, 213, 0.05);
} .fee-label {
    font-size: 0.7rem; color: var(--gray); margin-top: 0.5rem; } /* Order summary */ .order-summary { background: #f8f9fa; padding: 1.25rem; 
    border-radius: 6px; margin-bottom: 1.5rem;
} .summary-item {
    display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px dashed #e2e8f0; } .summary-item:last-child { border-bottom: 
    none;
} .summary-item.total {
    font-weight: 700; color: var(--dark); font-size: 1.1rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 2px solid #e2e8f0; } /* Confirmation 
checkbox */ .confirmation-check {
    display: flex; align-items: flex-start; margin-bottom: 1.5rem; gap: 0.5rem; } .confirmation-check input[type="checkbox"] { margin-top: 0.25rem; } 
.confirmation-check label {
    color: var(--dark); font-size: 0.95rem; } /* Button styles */ .btn { display: inline-flex; align-items: center; justify-content: center; width: 
    100%; padding: 0.875rem 1.5rem; border-radius: 4px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; cursor: pointer; border: none; 
    margin-bottom: 1.5rem;
} .btn:disabled {
    opacity: 0.7; cursor: not-allowed; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover:not(:disabled) { background: 
    var(--primary-dark);
} .error-message {
    color: var(--danger); text-align: center; margin-bottom: 1rem; min-height: 1.5rem; } /* Info section */ .checkout-info { background: #f8f9fa; 
    padding: 1.25rem; border-radius: 6px;
} .info-item {
    display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--dark-gray); font-size: 0.9rem; } .info-item:last-child { 
    margin-bottom: 0;
} .info-item i {
    margin-top: 0.25rem; flex-shrink: 0; color: var(--primary); } .info-item a { color: var(--primary); text-decoration: none; } .info-item a:hover { 
    text-decoration: underline;
} /* Footer */ footer {
    background: #1e272e; color: white; padding: 1.5rem; text-align: center; } .footer-content { display: flex; flex-direction: column; align-items: 
    center; gap: 1rem;
} .social-links {
    display: flex; gap: 1rem; } .social-links a { color: white; font-size: 1.25rem; transition: color 0.3s ease; } .social-links a:hover { color: 
    var(--primary);
} /* Responsive */ @media screen and (max-width: 768px) {
    .donation-card {
        padding: 1.5rem;
    }

    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }

    header {
        flex-direction: column; padding: 1rem;
    }

    .main-nav {
        margin-top: 1rem;
    }

    .main-nav ul {
        gap: 0.5rem;
    } } @media screen and (max-width: 480px) { .quick-amounts {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }

    .order-summary {
        padding: 1rem;
    }

    .main-nav ul {
        flex-direction: column; align-items: center;
    }

    .main-nav a {
        display: block; text-align: center;
    }
}