/* mrocon Affiliate — Adaptive theming + form layout.
 *
 * Defaults follow mrocon-default tokens. ?source=<slug> swaps CSS variables
 * via affiliate.js (set on :root) so the page picks up the originating
 * sister-brand's accent without duplicating CSS per source.
 *
 * Brand-Token-Quelle (Phase-1): hartkodiert in affiliate.js (s. dort).
 * Phase-2: per /affiliate/assets/source-tokens.json mit Hot-Reload.
 */

:root {
    --aff-accent:        var(--mrocon-primary, #2DD4BF);
    --aff-accent-dark:   var(--mrocon-secondary, #14B8A6);
    --aff-accent-contrast: #FFFFFF;
    --aff-bg-soft:       rgba(45, 212, 191, 0.08);
    --aff-pill-bg:       rgba(45, 212, 191, 0.12);
    --aff-pill-text:     #115E59;
}

/* Source pill — shown when ?source=<slug> is present on landing/apply */
.aff-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--aff-pill-bg);
    color: var(--aff-pill-text);
    border: 1px solid var(--aff-accent);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.aff-source-pill svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* Hero — adaptive accent */
.aff-hero h1 {
    color: var(--mrocon-navy, #0F172A);
    margin-bottom: 0.6rem;
}
.aff-hero .aff-hero-sub {
    color: var(--mrocon-text-light, #64748B);
    font-size: 1.05rem;
    max-width: 640px;
}
.aff-hero .btn-aff-primary {
    background: var(--aff-accent);
    border: 1px solid var(--aff-accent);
    color: var(--aff-accent-contrast);
    padding: 0.85rem 1.6rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-block;
    text-decoration: none;
    margin-top: 1.4rem;
    transition: background 0.15s, transform 0.1s;
}
.aff-hero .btn-aff-primary:hover {
    background: var(--aff-accent-dark);
    transform: translateY(-1px);
}

/* Program-summary card row */
.aff-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin: 1.6rem 0 0;
}
.aff-summary-card {
    background: #fff;
    border: 1px solid var(--mrocon-border, #E2E8F0);
    border-left: 3px solid var(--aff-accent);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}
.aff-summary-card h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mrocon-text-light, #64748B);
    margin: 0 0 0.4rem;
}
.aff-summary-card p {
    margin: 0;
    font-size: 1rem;
    color: var(--mrocon-navy, #0F172A);
    font-weight: 600;
}

/* Hero-card — apply-page intro above Section A.
 * Single coherent card with 4 sub-sections, cyan-tinted glass-pattern.
 * Source-adaptive via --aff-accent (set by affiliate.js when ?source= matches).
 * Pattern: same border/radius/spacing rhythm as fieldsets below, distinct
 * tint so it reads as "context block, not a form section".
 */
.aff-hero-card {
    max-width: 760px;
    margin: 0 auto 1.6rem;
    background: var(--aff-bg-soft);
    border: 1px solid var(--aff-accent);
    border-left: 4px solid var(--aff-accent);
    border-radius: 10px;
    padding: 1.4rem 1.5rem 1.3rem;
    color: var(--mrocon-text, #334155);
}
.aff-hero-card__intro {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--mrocon-navy, #0F172A);
    margin: 0 0 0.5rem;
}
.aff-hero-card__intro strong {
    color: var(--aff-accent-dark);
}
.aff-hero-card__lead {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--mrocon-text, #334155);
    margin: 0 0 1.1rem;
}
.aff-hero-card__lead strong {
    color: var(--mrocon-navy, #0F172A);
}
.aff-hero-card__section {
    margin: 1.05rem 0 0;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.aff-hero-card__section h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mrocon-navy, #0F172A);
    margin: 0 0 0.5rem;
    letter-spacing: 0.01em;
}
.aff-hero-card__section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}
.aff-hero-card__section li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--mrocon-text, #334155);
}
.aff-hero-card__section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--aff-accent);
}
.aff-hero-card__section--deal li strong {
    color: var(--mrocon-navy, #0F172A);
    font-weight: 700;
}
.aff-hero-card__closing {
    margin: 1.05rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--mrocon-text-light, #64748B);
}
@media (max-width: 540px) {
    .aff-hero-card {
        padding: 1.15rem 1.1rem 1.05rem;
    }
    .aff-hero-card__intro { font-size: 0.96rem; }
    .aff-hero-card__lead  { font-size: 0.9rem; }
    .aff-hero-card__section li { font-size: 0.9rem; }
}

/* Form layout */
.aff-form {
    max-width: 760px;
    margin: 0 auto;
}
.aff-form fieldset {
    border: 1px solid var(--mrocon-border, #E2E8F0);
    border-radius: 10px;
    padding: 1.2rem 1.4rem 1.4rem;
    margin: 0 0 1.6rem 0;
    background: #fff;
}
.aff-form legend {
    padding: 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mrocon-navy, #0F172A);
}
.aff-form .aff-field {
    margin: 0.85rem 0 0;
}
.aff-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--mrocon-text, #334155);
    font-size: 0.92rem;
}
.aff-form .aff-hint {
    display: block;
    font-weight: 400;
    color: var(--mrocon-text-light, #64748B);
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
}
.aff-form input[type="text"],
.aff-form input[type="email"],
.aff-form input[type="url"],
.aff-form input[type="password"],
.aff-form select,
.aff-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--mrocon-border, #E2E8F0);
    border-radius: 6px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--mrocon-text, #334155);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.aff-form input:focus,
.aff-form select:focus,
.aff-form textarea:focus {
    outline: none;
    border-color: var(--aff-accent);
    box-shadow: 0 0 0 3px var(--aff-bg-soft);
}
.aff-form textarea {
    min-height: 88px;
    resize: vertical;
}
.aff-form .aff-counter {
    font-size: 0.78rem;
    color: var(--mrocon-text-light, #64748B);
    text-align: right;
    margin-top: 0.2rem;
}
.aff-form .aff-counter.aff-over {
    color: #B91C1C;
    font-weight: 600;
}

/* Checkbox / radio groups */
.aff-form .aff-checkgroup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem 0.9rem;
    margin-top: 0.3rem;
}
.aff-form .aff-checkgroup label {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-weight: 400;
    color: var(--mrocon-text, #334155);
    font-size: 0.93rem;
    cursor: pointer;
}
.aff-form .aff-checkgroup input {
    margin-top: 0.2rem;
    width: auto;
    accent-color: var(--aff-accent);
}
.aff-form .aff-radiogroup {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.3rem;
}
.aff-form .aff-radiogroup label {
    display: flex;
    gap: 0.5rem;
    font-weight: 400;
    color: var(--mrocon-text, #334155);
    font-size: 0.93rem;
    cursor: pointer;
}
.aff-form .aff-radiogroup input {
    width: auto;
    accent-color: var(--aff-accent);
}

/* Compliance section — emphasize */
.aff-form fieldset.aff-compliance {
    border-color: var(--aff-accent);
    background: var(--aff-bg-soft);
}
.aff-form .aff-compliance label {
    font-weight: 500;
    line-height: 1.45;
    color: var(--mrocon-navy, #0F172A);
}

/* CTA buttons */
.aff-form .aff-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
}
.aff-form button.aff-btn-primary {
    background: var(--aff-accent);
    color: var(--aff-accent-contrast);
    border: 1px solid var(--aff-accent);
    padding: 0.95rem 1.4rem;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    font-size: 1.02rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.aff-form button.aff-btn-primary:hover {
    background: var(--aff-accent-dark);
}
.aff-form button.aff-btn-primary:disabled {
    background: #CBD5E1;
    border-color: #CBD5E1;
    color: #fff;
    cursor: not-allowed;
}
.aff-form .aff-actions-secondary {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--mrocon-text-light, #64748B);
}
.aff-form .aff-status {
    margin-top: 0.6rem;
    font-size: 0.92rem;
    text-align: center;
    min-height: 1.2em;
}
.aff-form .aff-status.aff-ok    { color: #047857; }
.aff-form .aff-status.aff-error { color: #B91C1C; }

/* Inline field errors */
.aff-form .aff-field-error {
    color: #B91C1C;
    font-size: 0.82rem;
    margin-top: 0.25rem;
    min-height: 1em;
}
.aff-form .aff-field.aff-invalid input,
.aff-form .aff-field.aff-invalid select,
.aff-form .aff-field.aff-invalid textarea {
    border-color: #B91C1C;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.08);
}

/* Conditional show/hide */
.aff-conditional {
    display: none;
}
.aff-conditional.aff-show {
    display: block;
}

/* Thank-You / Resume / Set-Password pages */
.aff-confirm-card {
    max-width: 580px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--mrocon-border, #E2E8F0);
    border-top: 4px solid var(--aff-accent);
    border-radius: 10px;
    padding: 1.8rem 1.6rem;
    text-align: center;
}
.aff-confirm-card h2 {
    color: var(--aff-accent-dark);
    margin-top: 0;
}
.aff-confirm-card .aff-ref {
    display: inline-block;
    margin: 0.8rem 0;
    background: var(--aff-bg-soft);
    color: var(--aff-pill-text);
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 600;
}