/*
 * SpeakerPacket payments desk (v0.7.118): payment-instruction
 * settings, the "How to pay" pill reveal, payment sheets, and the
 * shared lifecycle status badges. Self-contained on purpose (same
 * pattern as invoices.css / contracts.css): the /payments/ page
 * does not load the dashboard stylesheet.
 *
 * Vertical rhythm (stated per the 2026-10-16 hard rule): section
 * headings margin 0 0 6px, intro copy 0 0 20px, blocks separated by
 * 20px, fields inside a block 12px apart, small details 6px apart.
 */

.spp-sheets,
.spp-pay-settings {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #3B4A68;
}
.spp-pay-heading { color: #0D2B6C; font-size: 1.35rem; font-weight: 800; margin: 24px 0 6px; }
.spp-pay-settings .spp-pay-heading { margin-top: 0; }
.spp-pay-sub { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 20px; }
.spp-pay-block-title { color: #0D2B6C; font-size: 1.1rem; font-weight: 800; margin: 24px 0 12px; }
.spp-pay-empty { font-size: 1.0625rem; line-height: 1.65; color: #64748B; margin: 0 0 20px; }

/* Button + form primitives (scoped copy of the plugin standard). */
.spp-pay-settings .spp-button,
.spp-sheets .spp-button,
.spp-pay .spp-button {
	display: inline-block;
	border: 0;
	border-radius: 999px;
	padding: 11px 20px;
	font: inherit;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: #F5853C;
	color: #0D2B6C;
}
.spp-pay-settings .spp-button:hover,
.spp-sheets .spp-button:hover { background: #F5853C; }
.spp-pay-settings .spp-button-secondary,
.spp-sheets .spp-button-secondary {
	background: #fff;
	color: #0D2B6C;
	border: 1.5px solid #0D2B6C;
}
.spp-pay-settings .spp-button-secondary:hover,
.spp-sheets .spp-button-secondary:hover { background: #F1F5FE; }
.spp-pay-settings .spp-button-small,
.spp-sheets .spp-button-small { padding: 8px 14px; font-size: .85rem; }
.spp-link-button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: .88rem;
	font-weight: 700;
	color: #1A3F92;
	cursor: pointer;
	text-decoration: underline;
}
.spp-inline-form { display: inline; }

.spp-pay-settings .spp-field,
.spp-sheets .spp-field { margin: 0 0 12px; }
.spp-pay-settings .spp-field label,
.spp-sheets .spp-field label {
	display: block;
	margin: 0 0 6px;
	font-size: .9rem;
	font-weight: 700;
	color: #0D2B6C;
}
.spp-pay-settings .spp-input,
.spp-sheets .spp-input,
.spp-pay-settings .spp-textarea,
.spp-sheets .spp-textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #D8E2F7;
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	font-size: .95rem;
	color: #1C2733;
	background: #fff;
}

.spp-notice {
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: .95rem;
	line-height: 1.55;
}
.spp-notice-success { background: #E7F6EC; border: 1px solid #BEE3C8; color: #14532D; }
.spp-notice-error { background: #FDF2F2; border: 1px solid #F3C2C2; color: #7A1F1F; }

/* ---------- Payment-instruction settings ---------- */

.spp-pay-form { margin: 0; }
.spp-pay-block {
	border: 1px solid #D8E2F7;
	border-radius: 14px;
	background: #fff;
	padding: 20px 22px;
	margin: 0 0 20px;
	min-width: 0;
}
.spp-pay-block legend {
	padding: 0 8px;
	font-size: 1rem;
	font-weight: 800;
	color: #0D2B6C;
}
.spp-pay-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0 0 12px;
	font-size: .95rem;
}
.spp-pay-toggle label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #0D2B6C; }
.spp-pay-toggle input[type="checkbox"] { width: 18px; height: 18px; }
.spp-pay-rank select {
	margin-left: 6px;
	border: 1px solid #D8E2F7;
	border-radius: 8px;
	padding: 6px 10px;
	font: inherit;
}
.spp-pay-actions { margin: 20px 0 0; }
.spp-pay-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}
.spp-pay-grid > * { min-width: 0; }
@media (max-width: 640px) {
	.spp-pay-grid { grid-template-columns: 1fr; }
}
.spp-pay-hint { display: block; font-size: .875rem; color: #64748B; margin-top: 6px; line-height: 1.5; }
.spp-pay-radio { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; margin: 0 0 6px !important; }
.spp-pay-radio input { width: 18px; height: 18px; }

/* ---------- How to pay reveal ---------- */

.spp-pay { margin: 20px 0; }
.spp-pay-title {
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #1A3F92;
	margin: 0 0 12px;
}
.spp-pay-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.spp-pay-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid #0D2B6C;
	border-radius: 999px;
	background: #fff;
	color: #0D2B6C;
	padding: 10px 18px;
	font: inherit;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.spp-pay-pill:hover { background: #F1F5FE; }
.spp-pay-pill.is-active { background: #0D2B6C; color: #fff; }
.spp-pay-pref {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .4px;
	background: #FCF3E2;
	border: 1px solid #F0DDB0;
	border-radius: 999px;
	color: #8A5A00;
	padding: 3px 9px;
}
.spp-pay-panel {
	background: #F8FAFF;
	border: 1px solid #D8E2F7;
	border-radius: 12px;
	padding: 16px 20px;
}
.spp-pay-panel[hidden] { display: none; }
.spp-pay-line { margin: 0 0 6px; font-size: .95rem; line-height: 1.6; color: #1C2733; word-break: break-word; }
.spp-pay-line:last-child { margin-bottom: 0; }
.spp-pay-line-label { font-weight: 700; color: #0D2B6C; }
.spp-pay-event-line { font-weight: 600; color: #0D2B6C; }

/* ---------- Compose panels + lists ---------- */

.spp-compose {
	border: 1px solid #D8E2F7;
	border-radius: 14px;
	background: #fff;
	padding: 20px 22px;
	margin: 0 0 24px;
}
.spp-compose .spp-pay-heading { margin-top: 0; }
.spp-compose .spp-pay-sub a[aria-current="true"] { font-weight: 800; }

.spp-table-scroll { overflow-x: auto; margin: 0 0 24px; }
.spp-pay-list { width: 100%; border-collapse: collapse; font-size: .93rem; background: #fff; }
.spp-pay-list th {
	background: #0D2B6C;
	color: #fff !important;
	font-weight: 700 !important;
	text-align: left;
	font-size: .875rem;
	letter-spacing: .3px;
	padding: 11px 12px;
	border-bottom: 2px solid #0D2B6C;
	white-space: nowrap;
}
.spp-pay-list td { padding: 11px 12px; border-bottom: 1px solid #D8E2F7; color: #1C2733; vertical-align: middle; }
.spp-pay-list .spp-num { text-align: right; white-space: nowrap; }
.spp-pay-list-actions { white-space: normal; }
.spp-pay-list-actions > * { margin: 0 8px 6px 0; vertical-align: middle; }
.spp-sheet-form { margin: 0 0 8px; }

/* ---------- Lifecycle status badges (shared with invoices) ---------- */

.spp-status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.3;
	border: 1px solid transparent;
	white-space: nowrap;
}
.spp-status-draft { background: #F1F5FE; border-color: #D8E2F7; color: #1A3F92; }
.spp-status-sent,
.spp-status-waiting { background: #EAF1FF; border-color: #C3D4F5; color: #0D2B6C; }
.spp-status-overdue { background: #FDF2F2; border-color: #F3C2C2; color: #7A1F1F; }
.spp-status-paid { background: #E7F6EC; border-color: #BEE3C8; color: #14632D; }

/* v0.7.223: member app-screen type pass: this page's H1 is
   Divi's entry title; it takes the app heading weight 800 at
   the sitewide 36px. This stylesheet loads only on the
   payments pages. */
#main-content h1.entry-title { font-weight: 800; }