/**
 * smartEngin Licence & buy – offer cards (front end + editor preview).
 * Brand: green/navy, Poppins, pill buttons. Everything scoped to .sels-cards.
 */

/*
 * `hidden` MUST always win.
 *
 * The browser implements the hidden attribute through [hidden]{display:none} in
 * its own user-agent stylesheet, and that rule loses against EVERY rule in this
 * file that sets display. A single `display:flex` on a class is enough and the
 * element stays visible although the markup says hidden — which is exactly what
 * happened to the coupon and partner-code fields: both stood open under their
 * own "Redeem a coupon code" / "Referred by a partner?" link, and clicking the
 * link only made the link itself disappear.
 *
 * The same trap already cost the Courses member area a release (v0.31.0, all
 * video blocks visible at once); it is closed there by the identical rule. One
 * line per front-end area closes it here for good, including markup added later.
 */
.sels-cards [hidden],
.sels-account [hidden],
.sels-portal [hidden] {
	display: none !important;
}

.sels-cards {
	--sels-green: #37B971;
	--sels-green-2: #4ED66F;
	--sels-dark-1: #102332;
	--sels-dark-2: #11314A;
	--sels-neutral: #EAECE7;
	--sels-muted: #5B6B78;
	--sels-line: #e6e9ec;
	--sels-card-radius: 18px;
	--cols: 3;

	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--sels-dark-1);
	box-sizing: border-box;
}

.sels-cards *,
.sels-cards *::before,
.sels-cards *::after {
	box-sizing: border-box;
}

.sels-cards--cols-1 { --cols: 1; }
.sels-cards--cols-2 { --cols: 2; }
.sels-cards--cols-3 { --cols: 3; }
.sels-cards--cols-4 { --cols: 4; }
.sels-cards--cols-5 { --cols: 5; }
.sels-cards--cols-6 { --cols: 6; }

/* Responsive: reduce the REQUESTED column count on smaller screens by changing
   the --cols variable (the grid template above reads it). Crucially we never set
   more tracks than were asked for, so a single-card layout (--cols-1, e.g. one
   offer card sitting in a narrow WordPress column) never splits into two half-
   width tracks with an empty gap. */
@media (max-width: 1280px) {
	.sels-cards--cols-5,
	.sels-cards--cols-6 { --cols: 4; }
}

@media (max-width: 1024px) {
	.sels-cards--cols-3,
	.sels-cards--cols-4,
	.sels-cards--cols-5,
	.sels-cards--cols-6 { --cols: 2; }
}

@media (max-width: 680px) {
	.sels-cards { --cols: 1; }
}

/* When the cards sit inside a WordPress Columns block next to other content
   (e.g. one offer card on the left, descriptive text on the right), a narrow
   card column squeezes the card too much. WordPress only stacks columns below
   782px, so on tablets the card stays cramped. Here we let a columns block that
   actually contains our cards stack (card above the text) once it gets tight,
   which is what a narrow card wants. Scoped via :has() so no other layout is
   affected; browsers without :has() simply keep the side-by-side layout. */
@media (max-width: 900px) {
	/* !important: WordPress core sets .wp-block-columns{flex-wrap:nowrap} above
	   782px, and the columns keep their inline flex-basis width – both need to be
	   overridden for the columns to actually stack. */
	.wp-block-columns:has(.sels-cards) { flex-wrap: wrap !important; }
	.wp-block-columns:has(.sels-cards) > .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Card shell */
.sels-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sels-line);
	border-radius: var(--sels-card-radius);
	padding: 28px 26px;
	box-shadow: var(--sels-card-shadow, 0 10px 30px rgba(16, 35, 50, 0.06));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sels-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(16, 35, 50, 0.12);
}

/* Featured card */
.sels-card--featured {
	border: 2px solid var(--sels-green);
	box-shadow: 0 18px 46px rgba(55, 185, 113, 0.20);
}

.sels-card__ribbon {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #0b1722;
	background: linear-gradient(135deg, var(--sels-green) 0%, var(--sels-green-2) 100%);
	padding: 4px 12px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(55, 185, 113, 0.35);
}

/* Head */
.sels-card__head {
	margin-bottom: 14px;
}

.sels-card__title {
	font-size: var(--sels-fs-title, 24px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 6px;
	color: var(--sels-dark-1);
}

.sels-card__subtitle {
	font-size: 14px;
	line-height: 1.45;
	color: var(--sels-muted);
	margin: 0;
}

/* Price */
.sels-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0 14px;
}

.sels-card__amount {
	font-size: var(--sels-fs-price, 38px);
	font-weight: 700;
	line-height: 1;
	color: var(--sels-dark-1);
}

.sels-card__unit {
	font-size: 15px;
	font-weight: 500;
	color: var(--sels-muted);
}

/* Subscription self-service form ([sels_manage_subscription]) */
.sels-portal {
	max-width: 520px;
	padding: 22px 22px 18px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(16, 35, 50, 0.10);
	font-family: inherit;
}
.sels-portal__label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--sels-dark-1);
	margin-bottom: 4px;
}
.sels-portal__hint {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--sels-muted);
}
.sels-portal__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sels-portal__email {
	flex: 1 1 220px;
	padding: 11px 13px;
	border: 1px solid #cdd5db;
	border-radius: 10px;
	font-size: 15px;
}
.sels-portal__msg {
	margin: 10px 0 0;
	font-size: 14px;
	min-height: 1em;
}
.sels-portal__msg--ok { color: #1c7a49; }
.sels-portal__msg--error { color: #a01818; }

/* Crossed-out original price (discount) – small, next to the current price */
.sels-card__compare {
	/* Scales together with the price so the size difference stays proportional. */
	font-size: calc(var(--sels-fs-price, 38px) * 0.45);
	font-weight: 600;
	color: var(--sels-muted);
	text-decoration: line-through;
}

/* Highlight pill (activation limit) */
.sels-card__badge {
	display: block;
	text-align: center;
	/* Follows the feature-text slider, a touch smaller (keeps the 13px default). */
	font-size: calc(var(--sels-fs-features, 14px) - 1px);
	font-weight: 600;
	color: #1c7a49;
	background: rgba(78, 214, 111, 0.16);
	border-radius: 10px;
	padding: 9px 12px;
	margin-bottom: 16px;
}

.sels-card--featured .sels-card__badge {
	background: rgba(55, 185, 113, 0.20);
}

/* Features */
.sels-card__features {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sels-card__features li {
	position: relative;
	padding-left: 26px;
	font-size: var(--sels-fs-features, 14px);
	line-height: 1.4;
	color: var(--sels-dark-2);
}

.sels-card__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--sels-check, var(--sels-green));
	/* white check mark */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
}

/* Foot pinned to the bottom */
.sels-card__foot {
	margin-top: auto;
	padding-top: 4px;
}

.sels-card__tax {
	font-size: 12px;
	color: var(--sels-muted);
	margin: 0 0 12px;
	text-align: center;
}

.sels-card__buy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sels-card__email {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--sels-line);
	border-radius: 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--sels-dark-1);
	background: #fff;
}

.sels-card__email:focus {
	outline: none;
	border-color: var(--sels-green);
	box-shadow: 0 0 0 3px rgba(55, 185, 113, 0.18);
}

/* Coupon redemption (Phase 6): a small "redeem a code" toggle above the buttons. */
.sels-card__coupon {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sels-card__coupon-toggle {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--sels-green);
	cursor: pointer;
	text-decoration: underline;
}

.sels-card__coupon-toggle:hover {
	color: var(--sels-dark-1);
}

.sels-card__coupon-row {
	display: flex;
	gap: 8px;
}

.sels-card__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--sels-line);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	text-transform: uppercase;
	color: var(--sels-dark-1);
	background: #fff;
}

.sels-card__coupon-input:focus {
	outline: none;
	border-color: var(--sels-green);
	box-shadow: 0 0 0 3px rgba(55, 185, 113, 0.18);
}

/* Partnerprogramm (E5): das "Empfohlen von"-Feld — gleiche Optik wie das
   Gutscheinfeld, aber ohne Anwenden-Knopf (der Code aendert nichts am Preis). */
.sels-card__ref {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sels-card__ref-toggle {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--sels-green);
	cursor: pointer;
	text-decoration: underline;
}

.sels-card__ref-toggle:hover {
	color: var(--sels-dark-1);
}

.sels-card__ref-row {
	display: flex;
	gap: 8px;
}

.sels-card__ref-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--sels-line);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	text-transform: uppercase;
	color: var(--sels-dark-1);
	background: #fff;
}

.sels-card__ref-input:focus {
	outline: none;
	border-color: var(--sels-green);
	box-shadow: 0 0 0 3px rgba(55, 185, 113, 0.18);
}

.sels-card__coupon-apply,
.sels-card__ref-apply {
	flex: 0 0 auto;
	padding: 10px 16px;
	border: 1px solid var(--sels-line);
	border-radius: 10px;
	background: #f3f5f6;
	color: var(--sels-dark-1);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.sels-card__coupon-apply:hover,
.sels-card__ref-apply:hover {
	border-color: var(--sels-green);
	color: var(--sels-green);
}

.sels-card__coupon-msg,
.sels-card__ref-msg {
	margin: 0;
	font-size: 13px;
	color: var(--sels-green);
}

.sels-card__coupon-msg--error,
.sels-card__ref-msg--error {
	color: #b3261e;
}

/* Billing address (D2): revealed inside the card above the invoice threshold. */
.sels-card__addr {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sels-card__addr-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--sels-muted);
}

.sels-card__addr-input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--sels-line);
	border-radius: 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--sels-dark-1);
	background: #fff;
}

.sels-card__addr-input:focus {
	outline: none;
	border-color: var(--sels-green);
	box-shadow: 0 0 0 3px rgba(55, 185, 113, 0.18);
}

.sels-card__nopay {
	font-size: 13px;
	color: var(--sels-muted);
	text-align: center;
	margin: 0;
	padding: 10px;
	border: 1px dashed var(--sels-line);
	border-radius: 12px;
}

/* Buttons */
.sels-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--sels-fs-btn, 15px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.1s ease;
}

.sels-btn:hover { filter: brightness(1.05); }
.sels-btn:active { transform: translateY(1px); }

/* Button icon (before the label). Sized in em so it scales with the button
   font-size slider (1.2em = 18px at the 15px default). */
.sels-btn-icon { flex: 0 0 auto; width: 1.2em; height: 1.2em; }

/* When a custom button colour is set, the inline style provides the colour;
   drop the coloured glow so it does not clash. */
.sels-btn--custom { box-shadow: none; }

.sels-btn--pay {
	background: linear-gradient(135deg, var(--sels-green) 0%, var(--sels-green-2) 100%);
	color: #0b1722;
	box-shadow: 0 6px 18px rgba(55, 185, 113, 0.32);
}

.sels-btn--paypal {
	background: #ffc439;
	color: #1a1a1a;
}

.sels-btn--test {
	background: transparent;
	color: var(--sels-dark-2);
	border: 1px dashed var(--sels-green);
}

.sels-btn--free {
	background: var(--sels-dark-1);
	color: #fff;
}

.sels-btn--trial {
	background: linear-gradient(135deg, var(--sels-green) 0%, var(--sels-green-2) 100%);
	color: #0b1722;
	box-shadow: 0 6px 18px rgba(55, 185, 113, 0.32);
}

/* Trial duration note under the price */
.sels-card__trial {
	margin: -4px 0 10px;
	font-weight: 600;
	font-size: 14px;
	color: var(--sels-green);
}

.sels-btn--disabled {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* Free card */
.sels-card--free .sels-card__amount { color: var(--sels-dark-2); }

/* Stripe Payment Element mount */
.sels-card__pe {
	margin-bottom: 10px;
}

/* PayPal buttons mount */
.sels-card__paypal {
	margin-bottom: 6px;
}

/* Inline error message */
.sels-card__msg {
	font-size: 13px;
	margin: 10px 0 0;
	text-align: center;
}

.sels-card__msg--error {
	color: #a32020;
}

/* Success panel after a purchase */
.sels-card__success {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sels-card__success-title {
	font-size: 14px;
	font-weight: 600;
	color: #1c7a49;
	margin: 0;
}

.sels-card__keyrow {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.sels-card__key {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	background: rgba(16, 35, 50, 0.06);
	color: var(--sels-dark-1);
	border-radius: 10px;
	padding: 8px 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	word-break: break-all;
}

.sels-btn--copy {
	width: auto;
	flex: 0 0 auto;
	padding: 8px 14px;
	background: var(--sels-dark-2);
	color: #fff;
	font-size: 13px;
}

.sels-card__ordernr {
	font-size: 12px;
	color: var(--sels-muted);
	margin: 0;
}

.sels-card__mailed {
	font-size: 12px;
	color: var(--sels-muted);
	margin: 0;
	text-align: center;
}

/* Prominent validity notice (last line of the success panel) – dark red so it
   cannot be overlooked. */
.sels-card__validity {
	font-size: 13px;
	font-weight: 700;
	color: #a01818;
	background: rgba(200, 60, 60, 0.12);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 4px 0 0;
	text-align: center;
	line-height: 1.4;
}

/* Admin hint when nothing selected */
.sels-cards-empty {
	border: 1px dashed #c9d1d8;
	border-radius: 12px;
	padding: 18px;
	color: #5B6B78;
	font-size: 14px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Customer account "My purchases" (S8) – [sels_account]
 * ------------------------------------------------------------------------- */
.sels-account {
	font-family: inherit;
	color: var(--sels-dark-1);
}

/* Access gate (e-mail form / expired notice) reuses the portal card look. */
.sels-account--gate {
	max-width: 520px;
	padding: 22px 22px 18px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(16, 35, 50, 0.10);
}
.sels-account__label { display: block; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.sels-account__hint { margin: 0 0 12px; font-size: 14px; color: var(--sels-muted); }
.sels-account__notice { margin: 0 0 12px; font-size: 14px; color: var(--sels-muted); }
.sels-account__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sels-account__email {
	flex: 1 1 220px;
	padding: 11px 13px;
	border: 1px solid #cdd5db;
	border-radius: 10px;
	font-size: 15px;
}
.sels-account__btn { width: auto; flex: 0 0 auto; }
.sels-account__msg { margin: 10px 0 0; font-size: 14px; min-height: 1em; }
.sels-account__msg--ok { color: #1c7a49; }
.sels-account__msg--error { color: #a01818; }

/* Signed-in dashboard */
.sels-account__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.sels-account__title { margin: 0; font-size: 22px; font-weight: 700; }
.sels-account__who { margin: 2px 0 0; font-size: 14px; color: var(--sels-muted); }
.sels-account__logout { font-size: 13px; color: var(--sels-dark-2); }
.sels-account__empty {
	border: 1px dashed #c9d1d8;
	border-radius: 12px;
	padding: 18px;
	color: var(--sels-muted);
	text-align: center;
}

.sels-account__licenses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}
.sels-acc-card {
	background: #fff;
	border: 1px solid #e3e7ea;
	border-radius: 14px;
	padding: 18px 18px 16px;
	box-shadow: 0 4px 16px rgba(16, 35, 50, 0.06);
}
.sels-acc-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}
.sels-acc-card__name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }

.sels-acc-pill {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.sels-acc-pill--active { background: rgba(55, 185, 113, 0.16); color: #1c7a49; }
.sels-acc-pill--expired { background: rgba(214, 158, 46, 0.18); color: #8a5a00; }
.sels-acc-pill--ended { background: rgba(160, 24, 24, 0.12); color: #a01818; }

.sels-acc-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	border-top: 1px solid #eef1f3;
}
.sels-acc-row__label { color: var(--sels-muted); flex: 0 0 auto; }
.sels-acc-key { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sels-acc-key__val {
	background: rgba(16, 35, 50, 0.06);
	border-radius: 8px;
	padding: 4px 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	word-break: break-all;
}
.sels-acc-copy,
.sels-acc-release {
	appearance: none;
	border: 1px solid #cdd5db;
	background: #fff;
	color: var(--sels-dark-2);
	border-radius: 8px;
	padding: 3px 10px;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.sels-acc-copy:hover,
.sels-acc-release:hover { background: #f2f5f7; }

.sels-acc-sub { text-align: right; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.sels-acc-manage { font-size: 13px; color: var(--sels-dark-2); }
.sels-acc-manage-note { font-size: 12px; color: var(--sels-muted); }

.sels-acc-sites { margin-top: 10px; }
.sels-acc-sites__head { font-size: 13px; color: var(--sels-muted); margin-bottom: 6px; }
.sels-acc-sites__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sels-acc-site {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	background: rgba(16, 35, 50, 0.04);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 13px;
}
.sels-acc-site__name { word-break: break-all; }

.sels-acc-actions { margin-top: 14px; }
.sels-acc-dl { width: auto; }

.sels-acc-invoices { margin-top: 26px; }
.sels-acc-invoices__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.sels-acc-invtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.sels-acc-invtable th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sels-muted);
	border-bottom: 1px solid #e3e7ea;
	padding: 0 8px 8px;
}
.sels-acc-invtable td { padding: 10px 8px; border-bottom: 1px solid #eef1f3; vertical-align: middle; }
.sels-acc-num { text-align: right; white-space: nowrap; }
.sels-acc-tag {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	color: var(--sels-muted);
	background: rgba(16, 35, 50, 0.06);
	border-radius: 6px;
	padding: 1px 6px;
}
.sels-acc-view { color: var(--sels-dark-2); font-weight: 600; }

@media (max-width: 600px) {
	.sels-acc-invtable th:nth-child(2),
	.sels-acc-invtable td:nth-child(2) { display: none; }
}


/* Widerrufsverzicht auf der Produktkarte (§356 Abs. 5 BGB). Steht über den
   Bezahlknöpfen und ist bewusst abgesetzt – er soll gelesen werden. */
.sels-card__wdr {
	margin: 0 0 10px;
	padding: 9px 11px;
	border-radius: 9px;
	background: rgba(255, 196, 117, 0.16);
}

.sels-card__wdr-label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b5220;
	cursor: pointer;
}

.sels-card__wdr-box {
	flex: none;
	margin-top: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
}

/* ---------------------------------------------------------------------------
   Partner area (E7) – [sels_affiliate_area]. Plain and readable: a partner
   comes here for numbers, not for decoration.
   ------------------------------------------------------------------------- */

.sels-area {
	max-width: 900px;
	color: var(--sels-dark-1);
}

.sels-area__title {
	margin: 0 0 18px;
}

.sels-area__box {
	border: 1px solid var(--sels-line);
	border-radius: 14px;
	padding: 18px 20px;
	margin: 0 0 18px;
	background: #fff;
	box-shadow: var(--sels-aff-shadow, none);
}

.sels-area__box h3 {
	margin: 0 0 12px;
	font-size: 17px;
}

.sels-area__label {
	margin: 12px 0 2px;
	font-size: 13px;
	color: var(--sels-muted, #5b6b78);
}

.sels-area__value {
	margin: 0;
	font-size: 17px;
	word-break: break-all;
}

.sels-area__hint {
	display: block;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--sels-muted, #5b6b78);
}

/* "How to refer": one card per channel, so the buyer's benefit and the
   partner's commission sit side by side and can be compared at a glance. */
.sels-area__lead {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--sels-muted, #5b6b78);
}

.sels-area__ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 0 0 18px;
}

.sels-area__way {
	border: 1px solid var(--sels-line);
	border-radius: 12px;
	padding: 14px 16px;
	background: #fff;
}

.sels-area__way-title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
}

.sels-area__way .sels-area__value {
	font-size: 15px;
	margin: 0 0 10px;
}

/* The two numbers that decide it. Kept as a definition list: label above,
   value below, so a long value never squeezes its own label. */
.sels-area__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 12px;
	margin: 0 0 10px;
	padding: 10px 0;
	border-top: 1px solid var(--sels-line);
	border-bottom: 1px solid var(--sels-line);
}

.sels-area__split dt {
	font-size: 12px;
	color: var(--sels-muted, #5b6b78);
}

.sels-area__split dd {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 600;
}

.sels-area__split-earn {
	color: var(--sels-green, #37B971);
}

.sels-area__way .sels-area__hint {
	margin: 0 0 8px;
}

/* Several coupons are ONE channel with several codes, so they stack inside the
   card instead of each claiming a column of the grid. A thin rule separates
   them; only the last one carries the border the card's split usually draws. */
.sels-area__codes {
	margin: 0 0 12px;
}

.sels-area__code + .sels-area__code {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--sels-line);
}

.sels-area__code .sels-area__split {
	margin: 0;
	padding: 6px 0 0;
	border: 0;
}

.sels-area__code .sels-area__value {
	margin: 0 0 2px;
}

.sels-area__scope {
	margin: 0;
	font-size: 12px;
	color: var(--sels-muted, #5b6b78);
}

.sels-area__codes + .sels-area__hint {
	padding-top: 12px;
	border-top: 1px solid var(--sels-line);
}

.sels-area__note {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
}

.sels-area__rules {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	color: var(--sels-muted, #5b6b78);
}

.sels-area__rules li {
	margin: 0 0 6px;
}

/* Figures: one row on a desktop, stacking down to one column on a phone. */
.sels-area__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0 0 18px;
}

.sels-area__figure {
	border: 1px solid var(--sels-line);
	border-radius: 14px;
	padding: 14px 16px;
	background: #fff;
	box-shadow: var(--sels-aff-shadow, none);
}

.sels-area__figure-label {
	display: block;
	font-size: 13px;
	color: var(--sels-muted, #5b6b78);
}

.sels-area__figure-value {
	display: block;
	font-size: 22px;
	margin: 2px 0 4px;
}

.sels-area__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.sels-area__table th,
.sels-area__table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--sels-line);
	vertical-align: top;
}

.sels-area__table th {
	font-weight: 600;
	white-space: nowrap;
}

.sels-area__dl {
	display: grid;
	grid-template-columns: minmax(140px, auto) 1fr;
	gap: 6px 16px;
	margin: 0;
	font-size: 14px;
}

.sels-area__dl dt {
	color: var(--sels-muted, #5b6b78);
}

.sels-area__dl dd {
	margin: 0;
}

@media (max-width: 600px) {
	.sels-area__dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.sels-area__dl dd {
		margin: 0 0 8px;
	}
}

/* ---------------------------------------------------------------------------
   Partner application form (E1) – [sels_affiliate_apply].
   Same look as the contact forms on smartengin.de: a white card with a soft
   shadow, labels above the fields, rounded inputs, one green pill button.
   ------------------------------------------------------------------------- */

.sels-aff-apply {
	--sels-green: #37B971;
	--sels-dark-1: #102332;
	--sels-muted: #5B6B78;
	--sels-line: #e0e5e9;
	max-width: 640px;
	font-family: inherit;
	color: var(--sels-dark-1);
	box-sizing: border-box;
}

.sels-aff-apply *,
.sels-aff-apply *::before,
.sels-aff-apply *::after {
	box-sizing: border-box;
}

.sels-aff-apply__card {
	background: #fff;
	border-radius: 18px;
	padding: 28px 28px 24px;
	/* Strength comes from the setting (Partner program -> Program settings).
	   The fallback is the value the slider's default (30) produces. */
	box-shadow: var(--sels-aff-shadow, 0 10px 34px rgba(16, 35, 50, 0.10));
}

/* Two fields side by side on a desktop, stacked on a phone. */
.sels-aff-apply__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

@media (max-width: 560px) {
	.sels-aff-apply__row {
		grid-template-columns: 1fr;
	}
	.sels-aff-apply__card {
		padding: 22px 20px 20px;
	}
}

.sels-aff-apply__field {
	margin: 0 0 16px;
}

.sels-aff-apply__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sels-dark-1);
}

.sels-aff-apply__req {
	color: #b3261e;
}

.sels-aff-apply__field input,
.sels-aff-apply__field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--sels-line);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	color: var(--sels-dark-1);
	background: #fff;
}

.sels-aff-apply__field textarea {
	resize: vertical;
	min-height: 150px;
}

.sels-aff-apply__field input::placeholder,
.sels-aff-apply__field textarea::placeholder {
	color: #9aa7b1;
}

.sels-aff-apply__field input:focus,
.sels-aff-apply__field textarea:focus {
	outline: none;
	border-color: var(--sels-green);
	box-shadow: 0 0 0 3px rgba(55, 185, 113, 0.18);
}

.sels-aff-apply__hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sels-muted);
}

/* Character counter: grey while short, green once the minimum is reached. */
.sels-aff-apply__count {
	font-variant-numeric: tabular-nums;
}

.sels-aff-apply__count.is-ok {
	color: #1c7a49;
	font-weight: 600;
}

.sels-aff-apply__foot {
	margin-top: 4px;
}

.sels-aff-apply__foot .sels-btn {
	min-width: 200px;
}

/* Result messages sit INSIDE the card, above the fields. */
.sels-aff-apply__notice,
.sels-aff-apply__ok {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
}

.sels-aff-apply__notice {
	background: rgba(179, 38, 30, 0.08);
	color: #8c1d18;
}

.sels-aff-apply__ok {
	background: rgba(55, 185, 113, 0.14);
	color: #1c7a49;
}

/* --- Language switcher (DE/EN) on the customer account pages --------------- */
.sels-lang {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 13px;
}
.sels-lang__link {
	color: var(--sels-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.sels-lang__link:hover { color: inherit; }
.sels-lang__link.is-active {
	color: inherit;
	font-weight: 600;
	border-bottom-color: currentColor;
}

/* Why the licence key is missing from the account page (see SELS_Account). */
.sels-account__keynote {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sels-muted);
}