/*
 * HH Affiliate ACH Payouts — affiliate-area settings styles.
 *
 * Scoped to .hh-aff-ach-section so we never bleed into AffiliateWP
 * core or Portal styles. Two surfaces are supported:
 *   - .hh-aff-ach-section--classic  (classic Affiliate Area)
 *   - .hh-aff-ach-section--portal   (Affiliate Portal)
 *
 * Layout uses simple block flow so it inherits the surrounding theme's
 * typography. No utility classes beyond what we own.
 */

.hh-aff-ach-section {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	background: #fff;
}

.hh-aff-ach-section__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	font-weight: 700;
}

.hh-aff-ach-notice {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	font-size: 0.95rem;
}

.hh-aff-ach-notice--success {
	background: #e8f6e9;
	border: 1px solid #b6dfbb;
	color: #1e4624;
}

.hh-aff-ach-notice--error {
	background: #fbe9e7;
	border: 1px solid #f5c6cb;
	color: #58151c;
}

.hh-aff-ach-empty {
	margin: 0 0 1rem;
	color: #495057;
	font-style: italic;
}

.hh-aff-ach-tokens {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.hh-aff-ach-tokens th,
.hh-aff-ach-tokens td {
	padding: 0.45rem 0.5rem;
	border-bottom: 1px solid #e9ecef;
	text-align: left;
	vertical-align: middle;
}

.hh-aff-ach-tokens thead th {
	background: #f8f9fa;
	font-weight: 600;
	color: #2c3e50;
}

.hh-aff-ach-tokens tr.is-default td {
	background: #f0f9fa;
}

.hh-aff-ach-mask {
	color: #adb5bd;
	letter-spacing: 0.1em;
	margin-right: 0.25rem;
}

.hh-aff-ach-last4 {
	font-family: "Courier New", monospace;
	font-weight: 600;
	color: #495057;
}

.hh-aff-ach-default-badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.15rem 0.45rem;
	background: #6bc9d3;
	color: #fff;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hh-aff-ach-verif {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.hh-aff-ach-verif--verified {
	background: #d1e7dd;
	color: #0f5132;
}

.hh-aff-ach-verif--pending {
	background: #fff3cd;
	color: #664d03;
}

.hh-aff-ach-actions-cell {
	white-space: nowrap;
}

.hh-aff-ach-action {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background: #fff;
	color: #495057;
	text-decoration: none;
	font-size: 0.85rem;
}

.hh-aff-ach-action:hover {
	background: #e9ecef;
}

.hh-aff-ach-action--delete {
	border-color: #f5c2c7;
	color: #b02a37;
}

.hh-aff-ach-action--delete:hover {
	background: #b02a37;
	color: #fff;
	border-color: #b02a37;
}

.hh-aff-ach-form {
	margin: 1rem 0 0;
	padding: 1rem;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
}

.hh-aff-ach-form__title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	color: #2c3e50;
}

.hh-aff-ach-form__row {
	margin: 0 0 0.85rem;
}

.hh-aff-ach-form__row label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	color: #2c3e50;
}

.hh-aff-ach-form__row .required {
	color: #b02a37;
	margin-left: 0.15rem;
}

.hh-aff-ach-form__row input[type="text"],
.hh-aff-ach-form__row input[type="password"],
.hh-aff-ach-form__row select {
	width: 100%;
	max-width: 360px;
	padding: 0.5rem 0.6rem;
	border: 1px solid #ced4da;
	border-radius: 4px;
	font-size: 1rem;
	background: #fff;
}

.hh-aff-ach-form__row input[aria-invalid="true"],
.hh-aff-ach-form__row select[aria-invalid="true"] {
	border-color: #b02a37;
	background: #fef4f4;
}

.hh-aff-ach-form__row--checkbox label {
	font-weight: 400;
}

.hh-aff-ach-form__row--checkbox input[type="checkbox"] {
	margin-right: 0.4rem;
}

.hh-aff-ach-help {
	display: block;
	margin-top: 0.25rem;
	color: #6c757d;
	font-size: 0.8rem;
}

.hh-aff-ach-toggle {
	margin-top: 0.25rem;
	padding: 0.2rem 0.6rem;
	background: transparent;
	border: 1px solid #ced4da;
	border-radius: 4px;
	color: #495057;
	cursor: pointer;
	font-size: 0.8rem;
}

.hh-aff-ach-toggle:hover {
	background: #e9ecef;
}

.hh-aff-ach-confirm-status {
	font-weight: 600;
}

.hh-aff-ach-confirm-status[data-state="match"] {
	color: #0f5132;
}

.hh-aff-ach-confirm-status[data-state="mismatch"] {
	color: #b02a37;
}

.hh-aff-ach-form__submit {
	margin: 0.75rem 0 0;
}

.hh-aff-ach-submit {
	padding: 0.55rem 1.25rem;
	font-weight: 600;
}

.hh-aff-ach-security-note {
	margin: 0.85rem 0 0;
	padding: 0.5rem 0.65rem;
	background: #fff8e6;
	border: 1px solid #ffeaa7;
	border-radius: 4px;
	font-size: 0.85rem;
	color: #664d03;
}

/*
 * Affiliate Portal: outer section is a layout shell only; the white card +
 * Tailwind utilities (from the Portal bundle) carry the visual design.
 */
.hh-aff-ach-section--portal {
	margin-top: 2.5rem;
	/* Clear separation before the next settings block (e.g. User settings). */
	margin-bottom: 3.5rem;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}

.hh-aff-ach-section--portal .hh-aff-ach-form--portal {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

/* Classic token-table rules target td/th; neutralize where Tailwind sets row/cell styles. */
.hh-aff-ach-section--portal .hh-aff-ach-tokens thead th {
	background-color: transparent;
}

.hh-aff-ach-section--portal .hh-aff-ach-tokens tr.is-default td {
	background: transparent;
}

@media (max-width: 600px) {
	.hh-aff-ach-section--classic .hh-aff-ach-tokens,
	.hh-aff-ach-section--classic .hh-aff-ach-tokens thead,
	.hh-aff-ach-section--classic .hh-aff-ach-tokens tbody,
	.hh-aff-ach-section--classic .hh-aff-ach-tokens tr,
	.hh-aff-ach-section--classic .hh-aff-ach-tokens th,
	.hh-aff-ach-section--classic .hh-aff-ach-tokens td {
		display: block;
	}

	.hh-aff-ach-section--classic .hh-aff-ach-tokens thead {
		display: none;
	}

	.hh-aff-ach-section--classic .hh-aff-ach-tokens tr {
		margin-bottom: 0.75rem;
		border: 1px solid #e9ecef;
		border-radius: 4px;
		padding: 0.5rem 0.75rem;
	}

	.hh-aff-ach-section--classic .hh-aff-ach-tokens td {
		border-bottom: 0;
		padding: 0.25rem 0;
	}

	.hh-aff-ach-section--classic .hh-aff-ach-actions-cell {
		white-space: normal;
	}
}