Monthly Subscription Donation

Monthly Subscription Donation

/* Monthly Donation Form */
#donation-form {
max-width: 900px; /* wider */
margin: 20px auto;
font-family: Arial, sans-serif;
padding: 25px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
#donation-form h2, #donation-form h3 { margin-bottom: 10px; }
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.form-row label { flex: 1; }
/* Make single-child rows full width */
.form-row:only-child label,
.form-row label:only-child {
flex: 100%;
}
.form-row input,
.form-row select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 20px;
margin-bottom: 15px;
}
.checkbox-grid .checkbox {
display: flex;
align-items: center;
gap: 8px;
}
#donation-total-wrapper {
margin: 20px 0;
font-weight: bold;
color: #d42d2d;
font-size: 18px;
text-align: left;
}
#donation-form button {
display: inline-block;
background-color: #d42d2d; /* Red button */
color: #fff;
border: none;
padding: 14px 24px;
font-size: 18px;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
width: 100%;
}
#signature-pad {
border: 1px solid #ccc;
border-radius: 5px;
width: 100%; /* full width */
height: 150px; /* fixed height */
display: block;
}
#donation-form button:hover { background-color: #b81f1f; }
.agreement {
margin: 15px 0;
font-size: 14px;
}
#donation-form select {
width: 100%;
display: block;
line-height: normal; /* prevent text clipping */
height: 42px; /* consistent height */
font-size: 16px; /* make text clear */
padding: 8px 10px;
box-sizing: border-box;
}

[donation_bridge]