/* 
 * Donation and Payment Pages Styles
 * Improves contrast and visual appeal for donation/create and payment/checkout pages
 */

/* Card Styles - Override Bootstrap and bootshaus.css */
.donation-create .card,
.payment-checkout .card {
    background-color: #f5f7fa; /* Softer background color instead of pure white */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #333333;
    margin-bottom: 2rem;
    overflow: hidden;
}

.donation-create .card:hover,
.payment-checkout .card:hover {
    transform: none; /* Disable the hover effect from bootshaus.css */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.donation-create .card-header,
.payment-checkout .card-header {
    background-color: #004380;
    color: white;
    border-bottom: none;
    padding: 1.25rem 1.5rem;
}

.donation-create .card-body,
.payment-checkout .card-body {
    color: #333333;
    padding: 1.5rem;
}

.donation-create .card h1,
.donation-create .card h2,
.donation-create .card h3,
.donation-create .card h4,
.donation-create .card h5,
.donation-create .card h6,
.donation-create .card p,
.donation-create .card label,
.payment-checkout .card h1,
.payment-checkout .card h2,
.payment-checkout .card h3,
.payment-checkout .card h4,
.payment-checkout .card h5,
.payment-checkout .card h6,
.payment-checkout .card p,
.payment-checkout .card label {
    color: #333333;
}

.donation-create .card-header h1,
.payment-checkout .card-header h1 {
    color: white;
    font-size: 1.75rem;
    margin-bottom: 0;
}

/* Form Section Styles */
.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section h4 {
    color: #004380;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #004380;
    display: inline-block;
}

/* Button Styles */
.donation-create .btn-primary,
.payment-checkout .btn-primary {
    background-color: #E3000B;
    border-color: #E3000B;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(227, 0, 11, 0.3);
}

.donation-create .btn-primary:hover,
.payment-checkout .btn-primary:hover {
    background-color: #c5000a;
    border-color: #c5000a;
    box-shadow: 0 4px 8px rgba(227, 0, 11, 0.4);
}

.donation-create .btn-secondary,
.payment-checkout .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

.donation-create .btn-secondary:hover,
.payment-checkout .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.4);
}

.donation-create .btn-lg,
.payment-checkout .btn-lg {
    font-size: 1.125rem;
    padding: 0.875rem 1.75rem;
}

.donation-create .btn-block,
.payment-checkout .btn-block {
    display: block;
    width: 100%;
}

/* Suggested Amounts Buttons */
.suggested-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.amount-btn {
    min-width: 90px;
    font-weight: 600;
    border: 2px solid #004380;
    color: #004380;
    background-color: white;
    transition: all 0.2s ease;
}

.amount-btn:hover {
    background-color: #e6f0f9;
    border-color: #004380;
    color: #004380;
    transform: translateY(-2px);
}

.amount-btn.active {
    background-color: #004380;
    border-color: #004380;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 67, 128, 0.3);
}

.custom-amount-btn {
    background-color: #f8f9fa;
    border-color: #004380;
    color: #004380;
}

.custom-amount-btn:hover {
    background-color: #e6f0f9;
}

.custom-amount-btn.active {
    background-color: #004380;
    color: white;
}

/* Form Controls */
.donation-create .form-control,
.payment-checkout .form-control {
    border: 2px solid #b0bec5; /* Thicker, more visible border */
    border-radius: 4px;
    padding: 0.75rem;
    background-color: #ffffff; /* Keep inputs white for contrast with the softer card background */
    color: #333333;
    font-weight: 500; /* Slightly bolder text for better readability */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.donation-create .form-control:hover,
.payment-checkout .form-control:hover {
    border-color: #90a4ae; /* Darker border on hover for better visibility */
}

.donation-create .form-control:focus,
.payment-checkout .form-control:focus {
    border-color: #004380;
    background-color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(0, 67, 128, 0.25);
}

/* Improve form labels visibility */
.donation-create label,
.payment-checkout label {
    font-weight: 600; /* Bolder labels */
    color: #2c3e50; /* Darker color for better contrast */
    margin-bottom: 0.5rem;
}

/* Checkbox and Radio Button Styles */
.donation-create .form-check,
.payment-checkout .form-check {
    padding-left: 2rem; /* More space for the larger checkbox */
    margin-bottom: 1rem;
}

.donation-create .form-check-input,
.payment-checkout .form-check-input {
    width: 1.25rem; /* Larger checkbox */
    height: 1.25rem; /* Larger checkbox */
    margin-top: 0.2rem;
    margin-left: -2rem;
    border: 2px solid #004380; /* More visible border */
    background-color: #ffffff;
}

.donation-create .form-check-input:checked,
.payment-checkout .form-check-input:checked {
    background-color: #004380;
    border-color: #004380;
}

.donation-create .form-check-label,
.payment-checkout .form-check-label {
    color: #2c3e50;
    font-weight: 500;
}

/* Alert Styles */
.donation-create .alert,
.payment-checkout .alert {
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 2px solid transparent; /* Thicker border for better visibility */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.donation-create .alert-info,
.payment-checkout .alert-info {
    color: #0c5460;
    background-color: #e3f2fd; /* Lighter blue background */
    border-color: #90caf9; /* More visible border */
    font-weight: 500; /* Slightly bolder text */
}

.donation-create .alert-danger,
.payment-checkout .alert-danger {
    color: #721c24;
    background-color: #ffebee; /* Lighter red background */
    border-color: #ef9a9a; /* More visible border */
    font-weight: 500;
}

.donation-create .alert-success,
.payment-checkout .alert-success {
    color: #155724;
    background-color: #e8f5e9; /* Lighter green background */
    border-color: #a5d6a7; /* More visible border */
    font-weight: 500;
}

/* Table Styles */
.donation-details table {
    width: 100%;
    margin-bottom: 1.5rem;
    color: #333333;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #b0bec5; /* Thicker, more visible border */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.donation-details table th,
.donation-details table td {
    padding: 0.75rem 1rem;
    vertical-align: top;
    border-top: 1px solid #b0bec5; /* More visible border */
}

.donation-details table th {
    background-color: #e1e9f0; /* Slightly darker than card background for contrast */
    font-weight: 600;
    width: 30%;
    color: #2c3e50; /* Darker text for better readability */
}

.donation-details table tr:first-child th,
.donation-details table tr:first-child td {
    border-top: none;
}

.donation-details table tr:nth-child(even) td {
    background-color: #edf2f7; /* Alternating row color for better readability */
}

/* PayPal Button Container */
#paypal-button-container {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: #ffffff; /* White background for PayPal buttons to stand out */
    border-radius: 6px;
    border: 2px solid #b0bec5; /* Thicker, more visible border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center;
}

/* Loading Indicator */
#paypal-loading {
    color: #004380;
    font-weight: 600;
}

/* Definition List Styles (Summary) */
.summary-list {
    margin: 0; 
    padding: 0;
    border: 2px solid #b0bec5; /* Thicker, more visible border */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.summary-item { 
    display: grid; 
    grid-template-columns: 32% 1fr; 
}

.summary-item dt, 
.summary-item dd { 
    margin: 0; 
    padding: .75rem 1rem; 
    border-top: 1px solid #b0bec5; /* More visible border */
}

.summary-item dt { 
    background: #e1e9f0; /* Slightly darker than card background for contrast */
    font-weight: 600; 
    color: #2c3e50; /* Darker text for better readability */
}

.summary-item dd {
    background: #ffffff; /* White background for content */
}

.summary-item:first-child dt,
.summary-item:first-child dd { 
    border-top: none; 
}

/* Modal Styles */
.modal-content {
    background-color: #f5f7fa; /* Match card background color */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background-color: #004380;
    color: white;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.modal-title {
    color: white;
    font-weight: 600;
}

.modal-body {
    padding: 1.5rem;
    color: #212529 !important; /* Bootstrap default "body" colour */
}

.modal-body h3, 
.modal-body h4, 
.modal-body h5,
.modal-body p, 
.modal-body ul, 
.modal-body li {
    color: #212529 !important; /* Ensure all text elements are black */
}

.modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1.25rem 1.5rem;
    background-color: #edf2f7; /* Slightly darker than modal background */
}

/* Backdrop a bit lighter */
.modal-backdrop.show { 
    opacity: .25; /* 25% instead of 50% */
}

/* Lift the whole modal window above its backdrop */
.modal { z-index: 1060 !important; }   /* 1040 + 20 */
.modal-backdrop { z-index: 1050 !important; }   /* 1040 + 10 */

/* Make sure modal stays on top of its backdrop */
.modal-content { 
    z-index: 1056; /* backdrop = 1055 by default */
}

/* Terms checkbox specific styling */
#termsAccepted {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #004380;
}

label[for="termsAccepted"] {
    font-weight: 500;
    color: #2c3e50;
}

label[for="termsAccepted"] a {
    color: #004380;
    text-decoration: underline;
    font-weight: 600;
}

label[for="termsAccepted"] a:hover {
    color: #003366;
    text-decoration: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .donation-create .card-header h1,
    .payment-checkout .card-header h1 {
        font-size: 1.5rem;
    }
    
    .form-section h4 {
        font-size: 1.25rem;
    }
    
    .suggested-amounts {
        gap: 8px;
    }
    
    .amount-btn {
        min-width: 80px;
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 576px) {
    .donation-create .card-body,
    .payment-checkout .card-body {
        padding: 1.25rem;
    }
    
    .donation-create .card-header,
    .payment-checkout .card-header {
        padding: 1rem 1.25rem;
    }
    
    .donation-create .card-header h1,
    .payment-checkout .card-header h1 {
        font-size: 1.25rem;
    }
    
    .form-section h4 {
        font-size: 1.125rem;
    }

    /* ---------- Bessere Fokus-States für Tastaturnutzer ---------- */
    .payment-checkout .btn:focus-visible,
    .payment-checkout a:focus-visible,
    .payment-checkout button:focus-visible {
        outline: 3px solid #004380;
        outline-offset: 2px;
    }

    /* ---------- Schrittanzeige (Stepper) ---------- */
    .checkout-steps .steps {
        display: flex;
        gap: 12px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .checkout-steps .steps li {
        position: relative;
        padding: .25rem .75rem;
        border-radius: 999px;
        font-weight: 600;
        border: 1px solid #dee2e6;
        background: #f8f9fa;
    }
    .checkout-steps .steps li.done {
        border-color: #c3e6cb;
        background: #d4edda;
    }
    .checkout-steps .steps li.current {
        border-color: #004380;
        background: #e6f0f9;
    }

    /* ---------- Semantische Zusammenfassung (Definition List) ---------- */
    .summary-list {
        margin: 0; padding: 0;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        overflow: hidden;
    }
    .summary-item { display: grid; grid-template-columns: 32% 1fr; }
    .summary-item dt, .summary-item dd { margin: 0; padding: .75rem 1rem; border-top: 1px solid #dee2e6; }
    .summary-item dt { background: #f8f9fa; font-weight: 600; color: #333; }
    .summary-item:first-child dt,
    .summary-item:first-child dd { border-top: none; }

    /* ---------- PayPal-Container etwas dezenter ---------- */
    #paypal-button-container {
        margin: 1.25rem 0;
        padding: 1.25rem;
        background-color: #f8f9fa;
        border-radius: 6px;
        border: 1px solid #dee2e6;
        text-align: center;
    }

    /* ---------- Weniger Bewegung, wenn Nutzer es wünscht ---------- */
    @media (prefers-reduced-motion: reduce) {
        .amount-btn,
        .btn,
        .card,
        .form-control {
            transition: none !important;
            transform: none !important;
        }
    }


}