/* assets/css/pages/donate.css — v10.5.3 (F4)
   Ported from donate.php's $customStyles. All selectors are page-specific
   classes (no bare element or .container rules), so nothing collides with
   Bootstrap. Legacy style.css custom properties are remapped to the theme
   tokens, since a migrated page no longer loads style.css:
     --primary -> --pcd-primary, --secondary -> --pcd-secondary,
     --text-muted -> --pcd-text-muted, --shadow -> --pcd-shadow,
     --border-color -> --pcd-border, --card-bg -> --pcd-surface. */

.donation-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px auto 22px;
}

.flow-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    background: #f9fafb;
}

.flow-step.active {
    border-color: #fed7aa;
    color: #9a3412;
    background: #fff7ed;
}

.flow-arrow {
    color: #9ca3af;
    font-size: 0.8rem;
}

.social-proof-strip {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 0 20px;
}

.social-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.social-proof-item {
    background: #ffffff;
    border: 1px solid #dcfce7;
    border-radius: 10px;
    padding: 10px;
}

.social-proof-value {
    color: #166534;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.social-proof-label {
    color: #4b5563;
    font-size: 0.78rem;
    margin-top: 3px;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Category Card */
.category-card {
    background: var(--pcd-surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--pcd-shadow);
    border-top: 4px solid var(--pcd-primary);
    transition: transform 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-card:hover {
    transform: translateY(-3px);
}

.category-banner {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--pcd-primary) 0%, var(--pcd-secondary) 100%);
}

.category-content {
    padding: 20px;
}

.category-content h4 {
    margin: 0 0 10px 0;
    color: var(--pcd-secondary);
    font-size: 1.2rem;
}

.category-content p {
    color: var(--pcd-text-muted);
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.category-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--pcd-text-muted);
    margin-bottom: 15px;
}

.category-meta span i {
    color: var(--pcd-primary);
    margin-right: 5px;
}

/* View Sewa Patra Button */
.sewa-btn {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(135deg, var(--pcd-primary) 0%, var(--pcd-secondary) 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.sewa-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

@media (max-width: 768px) {
    .categories-grid { grid-template-columns: 1fr; }

    .social-proof-grid {
        grid-template-columns: 1fr;
    }
}

/* Card CTA. The original markup nested a <button> inside the <a class="category-card">
   — invalid (interactive inside interactive) and styled only by legacy style.css's
   global `button` rule, which migrated pages no longer load. It is a <span> now. */
.category-cta {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem;
    text-align: center;
    background: var(--pcd-secondary);
    color: #fff;
    border-radius: var(--pcd-radius);
    font-weight: 600;
}

.category-card:hover .category-cta {
    background: var(--pcd-secondary-dark);
}

/* v10.6.0 inline-style sweep. Shared pieces (.info-card, .pcd-quote,
   .pcd-list-plain, .pcd-callout, .pcd-empty, .pcd-actions-center) live in
   app.css — index.php and donation_category.php use the same components. */

.dn-ways-h {
    color: var(--pcd-primary);
    margin: 20px 0 12px 0;
    font-size: 1.1rem;
}

.dn-options {
    padding: 15px 20px;
    margin-bottom: 20px;
}

.dn-options-h {
    color: #1b5e20;
    margin: 0;
    font-size: 1.1rem;
}