/*!
 * IC Membership — front-end form styles.
 *
 * All design tokens are exposed on :root via the brand <style> block in
 * front-end.php, so a host site can override any of them in theme CSS
 * (or Oxygen / Bricks / Elementor custom CSS) without touching the plugin.
 */

:root {
	--ic-membership-accent:        #2563eb;
	--ic-membership-accent-rgb:    37, 99, 235;
	--ic-membership-accent-dark:   #0B2217;
	--ic-membership-ink:           rgba(11, 26, 20, 0.97);
	--ic-membership-ink-soft:      rgba(11, 26, 20, 0.72);
	--ic-membership-ink-muted:     rgba(11, 26, 20, 0.55);
	--ic-membership-line:          rgba(11, 26, 20, 0.12);
	--ic-membership-line-soft:     rgba(11, 26, 20, 0.06);
	--ic-membership-surface:       #ffffff;
	--ic-membership-surface-alt:   #fafaf7;
	--ic-membership-radius-card:   14px;
	--ic-membership-radius-input:  10px;
	--ic-membership-radius-button: 10px;
}

/* -----------------------------------------------------------------------------
 * Container
 * -------------------------------------------------------------------------- */

.ic-membership {
	box-sizing: border-box;
	max-width: 460px;
	margin: 2rem auto;
	padding: 2rem;
	background: var(--ic-membership-surface);
	border: 1px solid var(--ic-membership-line);
	border-radius: var(--ic-membership-radius-card);
	color: var(--ic-membership-ink);
	font-family: var(--ic-membership-font-text, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

.ic-membership *,
.ic-membership *::before,
.ic-membership *::after {
	box-sizing: border-box;
}

.ic-membership__title {
	margin: 0 0 1rem;
	font-family: var(--ic-membership-font-display, var(--ic-membership-font-text));
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ic-membership-accent-dark);
}

.ic-membership > p {
	margin: 0 0 1rem;
	color: var(--ic-membership-ink-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* -----------------------------------------------------------------------------
 * Form
 * -------------------------------------------------------------------------- */

.ic-membership__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ic-membership__label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.95rem;
	color: var(--ic-membership-ink-soft);
}
.ic-membership__label > span {
	font-weight: 500;
	color: var(--ic-membership-ink);
}
.ic-membership__label input {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--ic-membership-line);
	border-radius: var(--ic-membership-radius-input);
	background: var(--ic-membership-surface);
	color: var(--ic-membership-ink);
	font-size: 1rem;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ic-membership__label input:focus {
	outline: none;
	border-color: var(--ic-membership-accent);
	box-shadow: 0 0 0 3px rgba(var(--ic-membership-accent-rgb), 0.18);
}

.ic-membership__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: var(--ic-membership-ink-soft);
}

.ic-membership__button {
	appearance: none;
	border: 0;
	padding: 0.9rem 1.5rem;
	border-radius: var(--ic-membership-radius-button);
	background: var(--ic-membership-accent);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}
.ic-membership__button:hover {
	background: var(--ic-membership-accent-dark);
}
.ic-membership__button:active {
	transform: translateY(1px);
}
.ic-membership__button:focus-visible {
	outline: 2px solid var(--ic-membership-accent);
	outline-offset: 2px;
}

.ic-membership__links {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ic-membership-ink-muted);
	text-align: center;
}
.ic-membership__links a {
	color: var(--ic-membership-accent);
	text-decoration: none;
}
.ic-membership__links a:hover {
	text-decoration: underline;
}
.ic-membership__links span {
	margin: 0 0.35rem;
}

.ic-membership__honeypot {
	position: absolute;
	left: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * Notices
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Post-submission thank-you block (replaces the form on ?enquiry=sent)
 * -------------------------------------------------------------------------- */

.ic-membership__thanks {
	text-align: center;
	padding: 0.5rem 0 1rem;
}
.ic-membership__thanks-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	border-radius: 999px;
	background: rgba(52, 201, 138, 0.14);
	color: var(--ic-membership-accent, #34c98a);
	font-size: 28px;
	line-height: 1;
}
.ic-membership__thanks-heading {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ic-membership-accent-dark, #0B2217);
}
.ic-membership__thanks-message {
	margin: 0 0 1rem;
	color: var(--ic-membership-ink-soft, rgba(11, 26, 20, 0.72));
}

/* -----------------------------------------------------------------------------
 * Notices
 * -------------------------------------------------------------------------- */

.ic-membership-notice {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--ic-membership-radius-input);
	font-size: 0.95rem;
	line-height: 1.4;
}
.ic-membership-notice--success {
	background: rgba(52, 201, 138, 0.10);
	color: var(--ic-membership-accent-dark);
	border: 1px solid rgba(52, 201, 138, 0.35);
}
.ic-membership-notice--error {
	background: rgba(220, 38, 38, 0.07);
	color: #7f1d1d;
	border: 1px solid rgba(220, 38, 38, 0.30);
}
.ic-membership-notice--info {
	background: rgba(37, 99, 235, 0.07);
	color: #1e3a8a;
	border: 1px solid rgba(37, 99, 235, 0.25);
}