@charset "UTF-8";
/* ==========================================================================
   The opt-in form — context overrides
   --------------------------------------------------------------------------
   The form's base skin lives in main.css §15 alongside the design tokens.
   This file carries only what changes per CONTEXT, and is enqueued after
   main.css so these win on source order.

   The markup and the submit/validation logic are unchanged — every class,
   name, id and data attribute the handler and optin-form.js rely on is the
   same — so this only restyles what is already there.

   Contexts:
     - the sidebar panel        (.panel--steel)
     - the newsletter band      (.newsletter__form, white card)
     - the modal                (.st-modal)
     - page content, via [st_optin_form]
   ========================================================================== */

/* The page-content instance is boxed on a readable measure. */
.entry-content .st-optin {
	max-width: 460px;
	margin: 2em auto;
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	font-size: 1rem;
}

/* ── The steel sidebar panel ────────────────────────────────────────────── */

.panel--steel .st-optin__input {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}
.panel--steel .st-optin__input::placeholder { color: var(--on-steel); }
.panel--steel .st-optin__input:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, .14);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .15);
}

.panel--steel .st-optin__consent-text { color: var(--on-steel); font-size: .76rem; }
.panel--steel .st-optin__consent-text a { color: #fff; }
.panel--steel .st-optin__consent-text a:hover { color: var(--copper-soft); }

.panel--steel .st-optin__submit { background: var(--copper-fill); color: #fff; }
.panel--steel .st-optin__submit:hover:not(:disabled) { background: var(--copper-fill-hi); }

.panel--steel .st-optin__footer {
	border-top-color: rgba(255, 255, 255, .22);
	color: var(--on-steel);
}
.panel--steel .st-optin__company { color: #fff; }

.panel--steel .st-optin__message.is-success { color: #a9f0c9; }
.panel--steel .st-optin__message.is-error,
.panel--steel .st-optin__field-error { color: #ffc3bb; }

/* ── The newsletter band and the modal ──────────────────────────────────── */

.newsletter__form .st-optin__submit,
.st-modal .st-optin__submit { background: var(--copper-fill); color: #fff; }
.newsletter__form .st-optin__submit:hover:not(:disabled),
.st-modal .st-optin__submit:hover:not(:disabled) { background: var(--copper-fill-hi); }

/* ── States ─────────────────────────────────────────────────────────────── */

/* Once the handler confirms, the fields go and the message carries the
   panel on its own. */
.st-optin.is-done .st-optin__field,
.st-optin.is-done .st-optin__submit {
	display: none;
}

.st-optin.is-done .st-optin__message {
	padding: 1rem 1.1rem;
	border-radius: var(--r-md);
	background: #e2f3ea;
	font-size: .95rem;
	font-weight: 650;
}
.panel--steel .st-optin.is-done .st-optin__message { background: rgba(169, 240, 201, .14); }

.st-optin.is-loading { opacity: .75; }
.st-optin.is-loading .st-optin__submit { cursor: progress; }

/* A field the validator rejected, and the note it inserts after it. */
.st-optin__field.has-error .st-optin__input,
.st-optin__input.has-error {
	border-color: var(--down);
	box-shadow: 0 0 0 4px rgba(192, 67, 58, .12);
}

.st-optin__field-error {
	display: block;
	margin-top: .45rem;
	font-size: .78rem;
	font-weight: 650;
	color: var(--down);
}
.st-optin__consent .st-optin__field-error { padding-left: 1.75rem; }