.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
} .charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .donation-amount {
margin: 0;
height: auto;
} .charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .suggested-donation-amount > label,
.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .custom-donation-amount > .custom-donation-amount-wrapper {
height: 100%;
box-sizing: border-box;
} .charitable-amounts-layout-row .suggested-donation-amount {
flex: 1 1 0;
position: relative;
} .charitable-amounts-layout-row .suggested-donation-amount .description {
position: absolute !important; width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
} .charitable-amounts-layout-row .custom-donation-amount {
flex: 2 1 auto;
display: flex;
} .charitable-amounts-layout-row .custom-donation-amount .custom-donation-amount-wrapper {
display: flex;
align-items: center;
flex: 1 1 auto;
width: 100%;
gap: 8px;
} .charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts .custom-donation-amount .custom-donation-input {
flex: 1 1 auto;
min-width: 0;
width: auto;
} @media (max-width: 560px) {
.charitable-amounts-layout-row ul.donation-amounts.has-suggested-amounts {
flex-wrap: wrap;
}
.charitable-amounts-layout-row .suggested-donation-amount {
flex: 1 1 calc(33% - 8px);
}
.charitable-amounts-layout-row .custom-donation-amount {
flex: 1 1 100%;
}
}  .charitable-amount-images {
position: relative;
width: var(--cha-img-w, 100%);
height: var(--cha-img-h, 150px);
margin: 10px 0 0 0;
border-radius: 8px;
overflow: hidden;
} .charitable-amount-image {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--cha-img-transition, 0.25s ease);
background-position: var(--cha-img-position, center);
background-repeat: no-repeat;
background-size: var(--cha-img-size, cover);
pointer-events: none;
} .charitable-amount-image-caption {
display: none;
}
.charitable-amounts-layout-row .charitable-amount-image-caption {
display: block;
position: absolute;
left: 12px;
right: 12px;
bottom: 10px;
z-index: 1;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-align: left;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
pointer-events: none;
} .charitable-amounts-layout-row .charitable-amount-image--has-caption::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
pointer-events: none;
} .charitable-amount-image.is-active {
opacity: 1;
} .charitable-amount-image--empty {
background: #f3f4f6;
box-shadow: inset 0 0 0 1px #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
}
.charitable-amount-image--empty::after {
content: "";
width: 48px;
height: 42px;
border: 2px solid #cfd3da;
border-radius: 6px;
background:
radial-gradient(circle at 32% 38%, #cfd3da 0 5px, transparent 6px),
linear-gradient(135deg, transparent 55%, #cfd3da 55% 70%, transparent 70%);
background-repeat: no-repeat;
} .charitable-form-builder .charitable-amounts-layout-row .charitable-suggested-donation-amounts-container ul.donation-amounts.has-suggested-amounts {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: stretch;
} .charitable-form-builder .charitable-amounts-layout-row .custom-donation-amount .custom-donation-input {
min-width: 0 !important; width: auto !important; flex: 1 1 auto;
}
@media (max-width: 560px) {
.charitable-form-builder .charitable-amounts-layout-row .charitable-suggested-donation-amounts-container ul.donation-amounts.has-suggested-amounts {
flex-wrap: wrap;
}
} .widefat.charitable-campaign-suggested-donations tbody tr td.image-col,
.widefat.charitable-campaign-suggested-donations tfoot tr td.image-col {
padding: 0;
} .charitable-custom-amount-image-field {
margin-top: 10px;
padding-left: 39px;
}
.charitable-custom-amount-image-field .charitable-panel-field-image-picker {
display: flex;
align-items: center;
gap: 12px;
}
.charitable-custom-amount-image-field .charitable-panel-field-image-picker > label {
margin: 0;
}
.charitable-custom-amount-image-field .charitable-amount-image-cell {
display: flex;
align-items: center;
gap: 8px;
}
.charitable-custom-amount-image-field .charitable-amount-image-preview {
display: block;
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 4px;
border: 1px dashed #b3b7bd;
background-color: #f3f4f6;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.charitable-custom-amount-image-field .charitable-amount-image-preview.has-image {
border-style: solid;
border-color: #c3c4c7;
}
.charitable-custom-amount-image-field .charitable-amount-image-actions {
display: flex;
flex-direction: column;
gap: 2px;
}
.charitable-custom-amount-image-field .charitable-amount-image-actions a {
font-size: 12px;
text-decoration: none;
line-height: 1.4;
}
.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-select {
color: #2271b1;
}
.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-select:hover {
color: #135e96;
text-decoration: underline;
}
.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-clear {
color: #b32d2e;
}
.charitable-custom-amount-image-field .charitable-amount-image-actions a.charitable-amount-image-clear:hover {
text-decoration: underline;
} @media (prefers-reduced-motion: reduce) {
.charitable-amount-image {
transition: none;
}
}