/*
 * Automatic renewal ("Pay automatically") styles - the checkout checkbox, the PayPal subscribe button, the Billing tab card.
 * Loaded automatically on app pages (templates/boot-material/css/ux/*.css); tokens from fm-ui.css (--fm-*). Behaviour: includes/scripts/ux/61-billing-auto.js.
 */

/* ------------------------------------------------------------------ checkout */
.fmco-auto { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 12px; padding: 12px 14px; border: 1px solid #bfe3f8; background: #f0f9ff; border-radius: 14px; cursor: pointer; }
.fmco-auto input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--fm-primary, #0369a1); }
.fmco-auto b { display: block; font-size: 14px; color: #082f49; }
.fmco-auto small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--fm-muted, #6b7689); }
.fmco-auto:focus-within { outline: 2px solid var(--fm-primary, #0369a1); outline-offset: 2px; }
.fmco-auto-note { display: flex; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: #fffaeb; border: 1px solid #fde6a8; color: #78350f; font-size: 13px; line-height: 1.5; }
.fmco-auto-note i { margin-top: 3px; }
.fmco-pay.is-auto #fmcoPaypal { display: none; }
.fmco-btn--paypal { background: #ffc439; color: #111827 !important; border-color: #ffc439; }
.fmco-btn--paypal:hover { background: #f5b82e; }
.fmco-btn--paypal .fa-paypal { color: #003087; margin-right: 6px; }
.fmco-auto-hint { padding: 0; margin: 8px 0 0; }

/* ------------------------------------------------------------------ Billing tab card */
.bl-auto { margin: 22px 0 6px; border-radius: 18px; border-left: 5px solid #0369a1; }
.bl-auto h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 800 17px 'Plus Jakarta Sans', Inter, sans-serif; color: #082f49; }
.bl-auto p { margin: 0 0 12px; color: var(--fm-muted, #6b7689); line-height: 1.6; max-width: 760px; }
.bl-auto p b { color: var(--fm-ink, #1b2437); }
.bl-auto__a { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bl-auto__f { margin: 12px 0 0 !important; font-size: 12.5px; }
.bl-auto--on { border-left-color: #059669; }
.bl-auto--on h4 i { color: #059669; }
.bl-auto--failed, .bl-auto--suspended { border-left-color: #dc2626; background: #fffafa; }
.bl-auto--failed h4 i, .bl-auto--suspended h4 i { color: #dc2626; }
.bl-auto--pending { border-left-color: #d97706; }
@media (max-width: 640px) {
	.bl-auto__a .bl-btn { width: 100%; justify-content: center; text-align: center; }
}