Notice: Payment Unsuccessful
/* Clean, professional sans-serif system font */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f3f4f6; /* Very light cool grey */
margin: 0;
padding: 40px 20px;
color: #111827;
-webkit-font-smoothing: antialiased;
}
.email-wrapper {
max-width: 480px;
margin: 0 auto;
}
/* Minimalist Header */
.header {
text-align: center;
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* The "Receipt" Card */
.receipt-card {
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
/* High-Urgency Top Banner */
.warning-banner {
background-color: #dc2626; /* Strong Warning Red */
color: #ffffff;
text-align: center;
padding: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Top Section: The Alert */
.receipt-top {
padding: 30px 40px 30px 40px;
text-align: center;
}
.alert-icon {
font-size: 48px;
margin-bottom: 16px;
line-height: 1;
}
h1 {
font-size: 22px;
font-weight: 700;
margin: 0 0 12px 0;
color: #111827;
}
p {
font-size: 15px;
line-height: 1.5;
color: #4b5563;
margin: 0;
}
/* The Perforated Divider Line */
.divider-container {
position: relative;
height: 2px;
background-color: #ffffff;
}
.divider-line {
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 2px;
border-top: 2px dashed #e5e7eb;
}
/* CSS trick to create ticket cutouts on the sides */
.divider-container::before,
.divider-container::after {
content: '';
position: absolute;
top: -12px;
width: 24px;
height: 24px;
background-color: #f3f4f6; /* Matches body background */
border-radius: 50%;
z-index: 10;
}
.divider-container::before {
left: -12px;
box-shadow: inset -3px 0 5px rgba(0,0,0,0.02);
}
.divider-container::after {
right: -12px;
box-shadow: inset 3px 0 5px rgba(0,0,0,0.02);
}
/* Bottom Section: Details & CTA */
.receipt-bottom {
padding: 30px 40px 40px 40px;
background-color: #fafafa;
}
/* Invoice Data Table */
.invoice-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
.invoice-table td {
padding: 12px 0;
font-size: 15px;
border-bottom: 1px solid #f3f4f6;
}
.invoice-table tr:last-child td {
border-bottom: none;
}
.td-label {
color: #6b7280;
font-weight: 500;
}
.td-value {
color: #111827;
text-align: right;
font-weight: 600;
}
.status-badge {
display: inline-block;
background-color: #fee2e2;
color: #dc2626;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Highly Visible CTA Button */
.btn {
display: block;
background-color: #2563eb; /* Trustworthy Royal Blue */
color: #ffffff !important;
text-decoration: none !important;
padding: 16px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
text-align: center;
box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
transition: background-color 0.2s, transform 0.2s;
}
.btn:hover {
background-color: #1d4ed8;
transform: translateY(-1px);
}
/* Footer */
.footer {
margin-top: 30px;
text-align: center;
font-size: 12px;
color: #9ca3af;
line-height: 1.6;
}
.footer a {
color: #6b7280;
text-decoration: underline;
}
☁️ Cloud Services
Action Required: Payment Overdue For May
💳
Payment Declined
We were unable to process your recent charge for May. Your storage plan has been paused until the balance is resolved.
Billing Period
May 2026
Service
250 GB Plan
Amount Due
$2.99
Status
Past Due
Reactivate Now
Please update your payment method. If left unpaid, your account may be subject to automated file cleanup.
This notification was sent regarding your active billing agreement.
Cloud Services Inc. | 1234 Data Drive, Server City, CA.
Unsubscribe