/* ✅ Shared Table Styling */
.cdp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    table-layout: auto;
}

/* ✅ Bells & Donors Pagination */
#cdp-bells-pagination,
#cdp-donors-pagination {
    margin-top: 15px;
    gap: 5px;
    flex-wrap: wrap;
    display: flex;
}

#cdp-bells-pagination .cdp-page,
#cdp-donors-pagination .cdp-page {
    display: inline-block;
    padding: 6px 12px;
    margin-right: 5px;
    background: #eee;
    cursor: pointer;
    border-radius: 4px;
}

#cdp-bells-pagination .cdp-page:hover,
#cdp-donors-pagination .cdp-page:hover {
    background: #ccc;
}


#cdp-bells-results,
#cdp-donors-results {
    margin: 10px 0;
}

/* ✅ Bells Card */
.cdp-bell-card {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 6px;
}

.cdp-bell-col {
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
}

/* ✅ Donor Card */
.cdp-donor-card {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    background: #fafafa;
    border-radius: 6px;
}

.cdp-donor-col {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

/* ✅ Donor & Bell Images — NO FIXED WIDTH */
.cdp-donor-img,
.cdp-bell-img {
    width: auto;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
    display: block;
    margin-top: 8px;
}

/* ✅ No Image Placeholder — KEEP FIXED SIZE */
.cdp-no-img {
    width: 180px;
    height: 180px;
    background: #eee;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
}

/* ✅ Search Highlight */
.cdp-highlight {
    background: yellow;
    padding: 2px 4px;
    border-radius: 3px;
}

/* ✅ Responsive Layout */
@media (max-width: 768px) {
    .cdp-bell-col,
    .cdp-donor-col {
        width: 100%;
    }
}

/* ✅ Responsive Table Tweaks */
@media (max-width: 600px) {
    .cdp-table th,
    .cdp-table td {
        font-size: 14px;
        padding: 6px;
    }
}