/* Commune Email List Filter — Brand Styled */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
	--linen: #f4f0e3;
	--linen-light: #faf8f2;
	--linen-dark: #e8e2d0;
	--sage: #9aa583;
	--sage-dark: #7d8c6e;
	--forest: #3d5b47;
	--forest-light: #4f7259;
	--forest-dark: #2c3e33;
	--desert: #c8856a;
	--desert-dark: #a86b52;
	--stone: #6b7d8a;
}

body {
	background: linear-gradient(160deg, var(--linen) 0%, var(--linen-dark) 100%);
	font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	min-height: 100vh;
}

.container {
	max-width: 800px;
}

.tool-container {
	background: white;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(44, 53, 48, 0.08);
	padding: 2.5rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.page-title {
	font-family: 'Libre Baskerville', Georgia, serif;
	color: var(--forest);
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--linen);
}

.spinner-border {
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	color: var(--sage) !important;
}

.alert {
	margin-bottom: 2rem;
	border-radius: 10px;
}

.alert-info {
	background: var(--linen-light);
	border-color: var(--linen-dark);
	color: var(--forest-dark);
}

.alert-success {
	background: rgba(154, 165, 131, 0.15);
	border-color: var(--sage);
	color: var(--forest);
}

.alert-danger {
	background: rgba(200, 133, 106, 0.15);
	border-color: var(--desert);
	color: var(--desert-dark);
}

.form-label {
	font-weight: 600;
	color: var(--forest);
	margin-bottom: 0.5rem;
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.form-select,
.form-control {
	border-radius: 8px;
	border: 1px solid var(--linen-dark);
	padding: 0.75rem 1rem;
	font-family: 'Nunito Sans', sans-serif;
	transition: border-color 0.2s ease-in-out;
}

.form-select:focus,
.form-control:focus {
	border-color: var(--sage);
	box-shadow: 0 0 0 3px rgba(154, 165, 131, 0.2);
}

.section {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: var(--linen-light);
	border-radius: 12px;
	border: 1px solid var(--linen);
}

h2, h3, h4, h5, h6 {
	font-family: 'Libre Baskerville', Georgia, serif;
	color: var(--forest);
}

.btn-group {
	gap: 0.5rem;
}

.btn {
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	border-radius: 8px;
	font-family: 'Nunito Sans', sans-serif;
}

.btn-primary {
	background-color: var(--forest);
	border: none;
	transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
	background-color: var(--forest-light);
}

.btn-primary:focus {
	box-shadow: 0 0 0 3px rgba(61, 91, 71, 0.3);
}

.btn-secondary {
	background-color: var(--stone);
	border: none;
	transition: all 0.2s ease-in-out;
}

.btn-secondary:hover {
	background-color: #5a6b76;
}

.btn-success {
	background-color: var(--sage-dark);
	border: none;
}

.btn-success:hover {
	background-color: var(--sage);
}

.btn-outline-primary {
	color: var(--forest);
	border-color: var(--sage);
}

.btn-outline-primary:hover {
	background: var(--forest);
	border-color: var(--forest);
}

.status-text {
	font-size: 1.05rem;
	color: var(--forest);
	margin-bottom: 1rem;
	font-weight: 600;
}

.loading-container {
	padding: 2rem;
	text-align: center;
	background: var(--linen-light);
	border-radius: 12px;
	margin: 1rem 0;
	border: 1px solid var(--linen);
}

.loading-text {
	color: var(--stone);
	margin-top: 0.5rem;
	font-weight: 600;
}

/* Table styling */
.table {
	font-size: 0.88rem;
}

.table thead th {
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--stone);
	border-bottom: 2px solid var(--linen-dark);
}

.table tbody tr:hover {
	background: var(--linen-light);
}

/* Back link */
.back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--forest);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.88rem;
	margin-bottom: 1rem;
}

.back-link:hover {
	color: var(--forest-light);
	text-decoration: underline;
}

/* Badge overrides */
.badge.bg-primary { background: var(--forest) !important; }
.badge.bg-success { background: var(--sage-dark) !important; }
.badge.bg-warning { background: var(--desert) !important; color: white !important; }
.badge.bg-danger  { background: var(--desert-dark) !important; }
.badge.bg-info    { background: var(--stone) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--linen); }
::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 4px; }

/* Stored delivered lists: React renders Bootstrap's modal markup itself
   (no Bootstrap JS on this page), so the backdrop is the modal's own bg. */
.optin-modal { background: rgba(0, 0, 0, 0.45); }
.optin-table .optin-row { cursor: pointer; }
.optin-table .optin-name { overflow-wrap: anywhere; }
.optin-pending {
	border: 1px solid var(--linen-dark);
	border-radius: 6px;
	padding: 8px 10px;
	margin-bottom: 8px;
}
.optin-accent, .optin-accent:hover { color: var(--forest); }
.optin-modal .form-check-input:checked,
.optin-modal .form-check-input:indeterminate {
	background-color: var(--forest);
	border-color: var(--forest);
}
.optin-modal .btn-outline-primary:disabled {
	color: var(--sage-dark);
	border-color: var(--linen-dark);
}

/* Vendor dropdown shares its row with the Kajabi / Origins source checkboxes
   and the Refresh Origins now button. */
.optin-vendor-select { flex: 1 1 16rem; width: auto; min-width: 14rem; }
/* The page-level .spinner-border above is the 3rem loading spinner; inside a
   button (Refresh Origins now) it must stay text-sized. */
.btn .spinner-border {
	width: 1rem;
	height: 1rem;
	border-width: 0.15em;
	margin-bottom: 0;
	color: currentColor !important;
	vertical-align: -0.15em;
}