/* ============================================
   DON & COLLECTE — Frontend CSS
   ============================================ */
:root {
    --don-primary:    #27ae60;
    --don-primary-dk: #1e8449;
    --don-secondary:  #2980b9;
    --don-danger:     #e74c3c;
    --don-warning:    #f39c12;
    --don-gray-100:   #f8f9fa;
    --don-gray-200:   #e9ecef;
    --don-gray-400:   #ced4da;
    --don-gray-600:   #6c757d;
    --don-gray-800:   #343a40;
    --don-white:      #ffffff;
    --don-radius:     12px;
    --don-shadow:     0 4px 20px rgba(0,0,0,.08);
    --don-shadow-lg:  0 8px 40px rgba(0,0,0,.12);
    --don-transition: .2s ease;
}

/* ---- Reset ---- */
.don-campaigns-wrap *, .don-form-wrap *, .don-dashboard *, .don-auth-wrap * {
    box-sizing: border-box;
}

/* ============ CAMPAIGNS LIST ============ */
.don-campaigns-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.don-campaigns-header { text-align: center; margin-bottom: 40px; }
.don-campaigns-title  { font-size: 2rem; font-weight: 700; color: var(--don-gray-800); margin-bottom: 8px; }
.don-campaigns-subtitle { color: var(--don-gray-600); font-size: 1.1rem; }

.don-no-campaigns { text-align:center; padding: 60px 20px; color: var(--don-gray-600); }

.don-campaigns-grid {
    display: grid;
    gap: 28px;
}
.don-cols-1 { grid-template-columns: 1fr; }
.don-cols-2 { grid-template-columns: repeat(2,1fr); }
.don-cols-3 { grid-template-columns: repeat(3,1fr); }
.don-cols-4 { grid-template-columns: repeat(4,1fr); }

@media(max-width:900px){ .don-cols-3,.don-cols-4 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .don-campaigns-grid { grid-template-columns: 1fr; } }

/* ---- Campaign Card ---- */
.don-campaign-card {
    background: var(--don-white);
    border-radius: var(--don-radius);
    box-shadow: var(--don-shadow);
    overflow: hidden;
    transition: transform var(--don-transition), box-shadow var(--don-transition);
    display: flex;
    flex-direction: column;
}
.don-campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--don-shadow-lg);
}
.don-campaign-ended { opacity: .75; }

.don-card-image { display:block; position:relative; overflow:hidden; }
.don-card-image img { width:100%; height:220px; object-fit:cover; transition:transform .4s ease; }
.don-campaign-card:hover .don-card-image img { transform:scale(1.04); }

.don-badge {
    position:absolute; top:12px; right:12px;
    padding:4px 12px; border-radius:20px;
    font-size:.75rem; font-weight:700; letter-spacing:.5px;
}
.don-badge-ended  { background:#e74c3c; color:#fff; }
.don-badge-funded { background:#27ae60; color:#fff; }

.don-card-body { padding: 20px; flex:1; display:flex; flex-direction:column; gap:12px; }
.don-card-title { font-size:1.15rem; font-weight:700; margin:0; line-height:1.4; }
.don-card-title a { color: var(--don-gray-800); text-decoration:none; }
.don-card-title a:hover { color: var(--don-primary); }
.don-card-excerpt { color: var(--don-gray-600); font-size:.92rem; margin:0; flex:1; }

/* ---- Progress Bar ---- */
.don-progress-wrap { margin: 4px 0; }
.don-progress-bar-outer {
    background: var(--don-gray-200);
    border-radius: 100px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}
.don-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--don-primary), #2ecc71);
    border-radius: 100px;
    transition: width 1s ease;
    position: relative;
    min-width: 2%;
}
.don-progress-label {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    font-size:.6rem; font-weight:700; color:#fff; white-space:nowrap;
}
.don-progress-stats {
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.don-progress-stats span { display:flex; flex-direction:column; font-size:.82rem; }
.don-progress-stats strong { font-size:.95rem; color: var(--don-gray-800); }
.don-progress-stats small  { color: var(--don-gray-600); font-size:.75rem; }

.don-card-meta { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--don-gray-600); gap:8px; flex-wrap:wrap; }
.don-card-meta span { display:flex; align-items:center; gap:4px; }
.don-meta-days.don-urgent { color: var(--don-danger); font-weight:600; }

/* ============ BUTTONS ============ */
.don-btn {
    display: inline-flex; align-items:center; gap:6px;
    padding: 10px 20px; border-radius: 8px;
    font-size: .9rem; font-weight: 600; cursor: pointer;
    border: 2px solid transparent; text-decoration:none;
    transition: all var(--don-transition);
}
.don-btn-primary {
    background: var(--don-primary); color: var(--don-white); border-color: var(--don-primary);
}
.don-btn-primary:hover { background: var(--don-primary-dk); border-color: var(--don-primary-dk); color:#fff; }
.don-btn-secondary { background: var(--don-gray-200); color: var(--don-gray-800); border-color: var(--don-gray-200); }
.don-btn-secondary:hover { background: var(--don-gray-400); }
.don-btn-outline { background:transparent; border-color:var(--don-primary); color:var(--don-primary); }
.don-btn-outline:hover { background:var(--don-primary); color:#fff; }
.don-btn-large { padding: 14px 28px; font-size: 1rem; }
.don-btn-full  { width: 100%; justify-content:center; }

/* ============ SINGLE CAMPAIGN ============ */
.don-single-campaign { padding: 40px 0; }
.don-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.don-campaign-header { margin-bottom: 30px; }
.don-campaign-hero img { width:100%; max-height:420px; object-fit:cover; border-radius:var(--don-radius); }
.don-campaign-title { font-size: 2rem; margin: 20px 0 8px; }
.don-campaign-deadline {
    display:inline-block; background:var(--don-gray-100); color:var(--don-gray-600);
    padding:6px 14px; border-radius:20px; font-size:.88rem; font-weight:600;
}
.don-campaign-deadline.don-urgent { background:#fdf0ed; color:var(--don-danger); }

.don-campaign-layout {
    display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items:start;
}
@media(max-width:860px){ .don-campaign-layout { grid-template-columns: 1fr; } }

.don-campaign-content { font-size: 1rem; line-height:1.75; color: var(--don-gray-800); }

.don-recent-donors { margin-top:50px; }
.don-section-title { font-size:1.3rem; font-weight:700; margin-bottom:20px; color:var(--don-gray-800); }
.don-donors-list { display:flex; flex-direction:column; gap:12px; }
.don-donor-item {
    display:flex; align-items:flex-start; gap:14px;
    padding:14px; border-radius:10px; background:var(--don-gray-100);
}
.don-donor-avatar {
    width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--don-primary),#2ecc71);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.9rem; flex-shrink:0;
}
.don-donor-info { flex:1; display:flex; flex-direction:column; gap:2px; font-size:.88rem; }
.don-donor-message { color:var(--don-gray-600); font-style:italic; margin-top:2px; }
.don-donor-date { font-size:.78rem; color:var(--don-gray-600); margin-left:auto; white-space:nowrap; }

/* ============ DONATION FORM ============ */
.don-form-wrap {
    background: var(--don-white); border-radius: var(--don-radius);
    box-shadow: var(--don-shadow-lg); padding: 28px;
    position: sticky; top: 20px;
}
.don-form-title { font-size: 1.25rem; font-weight:700; margin:0 0 20px; color:var(--don-gray-800); }

.don-field-group { display:flex; flex-direction:column; gap:5px; }
.don-field-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.don-label { font-size:.85rem; font-weight:600; color:var(--don-gray-800); }
.don-field-hint  { font-size:.78rem; color:var(--don-gray-600); }

.don-input {
    width:100%; padding:10px 14px;
    border:2px solid var(--don-gray-200); border-radius:8px;
    font-size:.93rem; color:var(--don-gray-800);
    transition: border-color var(--don-transition);
    outline:none; background:var(--don-white);
}
.don-input:focus { border-color: var(--don-primary); box-shadow:0 0 0 3px rgba(39,174,96,.1); }
.don-textarea { resize:vertical; min-height:80px; }

.don-amount-grid {
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;
}
.don-amount-btn {
    padding:8px 16px; border:2px solid var(--don-gray-200);
    background:var(--don-white); color:var(--don-gray-800);
    border-radius:8px; font-weight:600; font-size:.88rem; cursor:pointer;
    transition: all var(--don-transition);
}
.don-amount-btn:hover, .don-amount-btn.active {
    border-color: var(--don-primary); background:var(--don-primary); color:#fff;
}
.don-custom-amount-wrap { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.don-currency-symbol { font-weight:700; color:var(--don-gray-600); }

.don-options-wrap { display:flex; flex-direction:column; gap:8px; }
.don-checkbox-label { display:flex; align-items:center; gap:8px; font-size:.9rem; cursor:pointer; }
.don-checkbox-label input { width:16px; height:16px; accent-color:var(--don-primary); }

.don-logged-in-msg {
    display:flex; align-items:center; gap:6px;
    font-size:.85rem; color:var(--don-gray-600); background:var(--don-gray-100);
    padding:8px 12px; border-radius:8px;
}

.don-btn-submit { width:100%; justify-content:center; font-size:1rem; margin-top:16px; }
.don-security-note {
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:.78rem; color:var(--don-gray-600); margin-top:8px;
}

/* ---- Notices ---- */
.don-notice {
    padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:.9rem; border-left:4px solid;
}
.don-notice-error   { background:#fdf0ed; border-color:var(--don-danger);  color:#c0392b; }
.don-notice-success { background:#eafaf1; border-color:var(--don-primary); color:#1e8449; }
.don-notice-info    { background:#ebf5fb; border-color:var(--don-secondary);color:#1a6a9a; }

/* ---- Success Box ---- */
.don-success-box {
    text-align:center; padding:40px 30px; background:var(--don-white);
    border-radius:var(--don-radius); box-shadow:var(--don-shadow-lg);
}
.don-success-icon {
    width:60px; height:60px; background:var(--don-primary); color:#fff;
    border-radius:50%; font-size:1.8rem; display:flex; align-items:center;
    justify-content:center; margin:0 auto 20px;
}
.don-ref { font-size:.85rem; color:var(--don-gray-600); }

/* ============ AUTH / ESPACE DONATEUR ============ */
.don-auth-wrap { max-width:480px; margin:40px auto; padding:0 16px; }
.don-auth-box {
    background:var(--don-white); border-radius:var(--don-radius);
    box-shadow:var(--don-shadow-lg); overflow:hidden;
}
.don-auth-tabs { display:flex; border-bottom:2px solid var(--don-gray-200); }
.don-tab-btn {
    flex:1; padding:16px; font-size:.95rem; font-weight:600;
    background:transparent; border:none; cursor:pointer;
    color:var(--don-gray-600); transition:all var(--don-transition);
}
.don-tab-btn.active { color:var(--don-primary); border-bottom:3px solid var(--don-primary); margin-bottom:-2px; }
.don-tab-content { padding:28px; }
.don-auth-form { display:flex; flex-direction:column; gap:16px; }

/* ============ DONOR DASHBOARD ============ */
.don-dashboard { display:grid; grid-template-columns:260px 1fr; min-height:80vh; }
@media(max-width:768px){ .don-dashboard { grid-template-columns:1fr; } }

.don-dashboard-sidebar {
    background:var(--don-gray-800); color:#fff; padding:28px 20px;
    display:flex; flex-direction:column; gap:8px;
}
.don-donor-profile { text-align:center; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:16px; }
.don-avatar-lg {
    width:72px; height:72px; border-radius:50%;
    background:linear-gradient(135deg,var(--don-primary),#2ecc71);
    color:#fff; font-size:1.4rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.don-donor-profile h3 { margin:0; font-size:1rem; color:#fff; }
.don-donor-profile p  { margin:4px 0 0; font-size:.82rem; color:rgba(255,255,255,.6); }

.don-dashboard-nav { display:flex; flex-direction:column; gap:4px; flex:1; }
.don-nav-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:8px; color:rgba(255,255,255,.7);
    font-size:.9rem; text-decoration:none; transition:all var(--don-transition);
}
.don-nav-item:hover, .don-nav-item.active { background:var(--don-primary); color:#fff; }

.don-logout-btn {
    display:flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:8px; color:rgba(255,255,255,.5);
    font-size:.85rem; text-decoration:none; transition:color var(--don-transition);
    margin-top:auto;
}
.don-logout-btn:hover { color:#fff; }

.don-dashboard-main { padding:32px; background:var(--don-gray-100); }
.don-section { display:flex; flex-direction:column; gap:24px; }

.don-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:600px){ .don-stats-grid { grid-template-columns:1fr; } }

.don-stat-card {
    background:var(--don-white); border-radius:var(--don-radius);
    padding:24px; text-align:center; box-shadow:var(--don-shadow);
    display:flex; flex-direction:column; align-items:center; gap:8px;
}
.don-stat-icon { font-size:2rem; }
.don-stat-value { font-size:1.8rem; font-weight:700; color:var(--don-gray-800); }
.don-stat-label { font-size:.85rem; color:var(--don-gray-600); }

.don-subsection-title { font-size:1.05rem; font-weight:700; margin:8px 0 0; color:var(--don-gray-800); }

/* ============ TABLES ============ */
.don-table-wrap { overflow-x:auto; border-radius:8px; box-shadow:var(--don-shadow); }
.don-table { width:100%; border-collapse:collapse; background:var(--don-white); font-size:.88rem; }
.don-table th { background:var(--don-gray-100); padding:12px 14px; text-align:left; font-weight:600; color:var(--don-gray-600); border-bottom:2px solid var(--don-gray-200); }
.don-table td { padding:12px 14px; border-bottom:1px solid var(--don-gray-200); color:var(--don-gray-800); }
.don-table tr:last-child td { border-bottom:none; }
.don-table tr:hover td { background:var(--don-gray-100); }

/* ---- Status pills ---- */
.don-status {
    display:inline-block; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:600;
}
.don-status-completed { background:#eafaf1; color:#1e8449; }
.don-status-pending   { background:#fef9e7; color:#b7770d; }
.don-status-refunded  { background:#ebf5fb; color:#1a6a9a; }
.don-status-failed    { background:#fdf0ed; color:#c0392b; }

/* ---- Profile form ---- */
.don-profile-form { display:flex; flex-direction:column; gap:18px; max-width:500px; }
.don-divider { border:none; border-top:1px solid var(--don-gray-200); }

/* ---- Empty state ---- */
.don-empty { text-align:center; padding:50px 20px; color:var(--don-gray-600); }
.don-empty p { margin-bottom:16px; }