/*
 * Compiled stylesheet: event-donation.css
 * Shared by views:
 *   - app/Views/public/event-donation.php
 */

* { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
    [x-cloak] { display: none !important; }
    
    /* Brand Colors */
    .bg-brand { background-color: #B76E2E; }
    .text-brand { color: #B76E2E; }
    .border-brand { border-color: #B76E2E; }
    .bg-sacred-dark { background-color: #2C1A12; }
    .text-sacred-dark { color: #2C1A12; }
    
    /* Card Styles */
    .card-shadow { box-shadow: 0 10px 50px -15px rgba(0,0,0,0.06); }
    .chart-card {
        background: #ffffff;
        border-radius: 24px;
        padding: 1.8rem;
        border: 1px solid #e6eef5;
        transition: box-shadow 0.2s;
    }
    .chart-card:hover { box-shadow: 0 25px 45px -12px rgba(0,40,70,0.2); }
    
    /* Amount Chips */
    .amount-chip-active { background-color: #B76E2E; color: white; border-color: #B76E2E; transform: scale(1.05); box-shadow: 0 4px 15px rgba(183, 110, 46, 0.3); }
    .amount-chip-inactive { background-color: white; color: #6B7280; border-color: #F3F4F6; }
    
    /* Progress Bar */
    .prog-bar { height: 6px; border-radius: 3px; background: #F3F4F6; overflow: hidden; }
    .prog-fill { height: 100%; border-radius: 3px; background: #B76E2E; transition: width 1s ease-out; }
    
    /* Stats */
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
    .stat-item { background: #f8f9fa; padding: 1rem; border-radius: 12px; text-align: center; }
    .stat-value { font-size: 1.5rem; font-weight: 700; color: #B76E2E; }
    .stat-label { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; }
    
    /* Budget Items */
    .budget-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid #e9ecef; }
    .budget-category { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
    .budget-amount { font-weight: 600; color: #B76E2E; }
    .budget-total { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #dee2e6; display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; }
    
    /* Schedule Styles */
    .schedule-item { display: flex; gap: 1rem; padding: 0.8rem; border-bottom: 1px dashed #e6eef5; }
    .schedule-time { min-width: 100px; font-weight: 600; color: #B76E2E; }
    .schedule-activity { flex: 1; }
    .schedule-activity h6 { font-weight: 600; margin-bottom: 0.2rem; color: #2C1A12; }
    
    /* Form Styles */
    .form-control, .form-select {
        width: 100%;
        padding: 0.8rem 1rem;
        border: 2px solid #dee2e6;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.2s;
    }
    .form-control:focus, .form-select:focus {
        outline: none;
        border-color: #B76E2E;
        box-shadow: 0 0 0 3px rgba(183, 110, 46, 0.1);
    }
    .btn-donate {
        width: 100%;
        background: linear-gradient(135deg, #B76E2E, #9B5A24);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s;
    }
    .btn-donate:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(183, 110, 46, 0.3); }
    .btn-donate:disabled { opacity: 0.6; cursor: not-allowed; }
    
    /* Success State */
    .success-state { text-align: center; padding: 2rem; }
    .success-icon { font-size: 5rem; color: #28a745; margin-bottom: 1rem; animation: bounceIn 0.5s; }
    .error-state { text-align: center; padding: 2rem; }
    .error-icon { font-size: 5rem; color: #dc3545; margin-bottom: 1rem; animation: shake 0.5s; }
    @keyframes bounceIn {
        0% { transform: scale(0); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-10px); }
        75% { transform: translateX(10px); }
    }
    .receipt-box { background: #f8f9fa; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; text-align: left; border: 1px solid #dee2e6; }
    
    /* Toast Notifications */
    .toast-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        max-width: 400px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        animation: slideInRight 0.3s ease;
        border-left: 4px solid;
    }
    .toast-success { border-left-color: #28a745; }
    .toast-error { border-left-color: #dc3545; }
    .toast-info { border-left-color: #17a2b8; }
    .toast-warning { border-left-color: #ffc107; }
    .toast-icon { font-size: 1.5rem; }
    .toast-content { flex: 1; }
    .toast-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; }
    .toast-message { font-size: 0.8rem; color: #6c757d; }
    .toast-close { cursor: pointer; color: #999; font-size: 1.2rem; }
    @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    @media (max-width: 768px) {
        .stats-grid { grid-template-columns: repeat(2, 1fr); }
        .schedule-item { flex-direction: column; gap: 0.5rem; }
        .schedule-time { min-width: auto; }
        .toast-notification { min-width: 280px; right: 10px; left: 10px; max-width: calc(100% - 20px); }
    }