/* ====================================================================
   OptionFinder Bridge Setup-Assistent
   Layout passend zum Member-Area Look & Feel
   ==================================================================== */

.ofma-bridge-setup {
    width: 100%;
    margin: 0 auto;
    padding: 24px 24px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--of-text-primary, #1f2937);
    line-height: 1.55;
}

/* ── 2-Spalten-Grid: links die Steps, rechts die Troubleshooting-FAQs ─ */
.ofma-bridge-setup__columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    margin-top: 8px;
}
.ofma-bridge-setup__col-steps,
.ofma-bridge-setup__col-faq {
    min-width: 0; /* verhindert Overflow von Code-Bloecken in Grid-Items */
}
@media (max-width: 980px) {
    .ofma-bridge-setup__columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.ofma-bridge-setup__header {
    margin-bottom: 18px;
    /* in der Vollbreite-Variante linksbuendig — passt zum Pro-Page-Layout */
}
.ofma-bridge-setup__header h1 {
    font-size: var(--of-text-4xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ── Intro-Block (Was die Bridge ist + Trust + Setup-Zeit) ───────── */
/* Volle Breite — KEIN max-width-Constraint mehr, damit der Block die
   gesamte Konto-Tab-Breite ausschoepft. */
.ofma-bridge-setup__intro {
    margin: 0 0 28px;
}
.ofma-bridge-setup__intro p {
    margin: 0 0 14px;
    font-size: var(--of-text-lg);
    line-height: 1.6;
    color: var(--of-text-primary, #1e293b);
}
.ofma-bridge-setup__intro p:last-child { margin-bottom: 0; }

/* Trust-Absatz: visuell hervorgehoben (teal-Akzent, kein Marketing-Glow).
   KEIN display:flex — sonst werden <strong> + Text-Nodes als Flex-Items
   in Spalten umbrochen. Stattdessen Icon als inline-block am Zeilenanfang. */
.ofma-bridge-setup__intro-trust {
    background: rgba(20, 184, 166, 0.06);
    border-left: 4px solid #14b8a6;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 8px 0 14px !important;
}

/* Setup-Zeit-Absatz: subtiler Hinweis, kleinere Schrift, ebenfalls
   ohne flex damit Inline-Tags normal flowen. */
.ofma-bridge-setup__intro-time {
    font-size: var(--of-text-base) !important;
    color: var(--of-text-secondary, #475569) !important;
    padding-left: 4px;
}

/* Icon als inline-block, leichter Abstand zum Folgetext */
.ofma-bridge-setup__intro-icon {
    display: inline-block;
    font-size: var(--of-text-xl);
    line-height: 1;
    margin-right: 8px;
    vertical-align: -2px; /* leicht senken fuer optisches Mitten-Alignment */
}

/* Dark-Mode-Anpassungen fuer den Intro-Block */
[data-theme="dark"] .ofma-bridge-setup__intro p { color: #e2e8f0; }
[data-theme="dark"] .ofma-bridge-setup__intro-trust {
    background: rgba(20, 184, 166, 0.12);
    border-left-color: #2dd4bf;
}
[data-theme="dark"] .ofma-bridge-setup__intro-time { color: #94a3b8 !important; }

/* Troubleshooting in der rechten Spalte braucht weniger Vertical-Margin */
.ofma-bridge-setup__col-faq .ofma-bridge-setup__troubleshooting {
    margin-top: 0;
}
.ofma-bridge-setup__col-faq .ofma-bridge-setup__troubleshooting h2 {
    font-size: var(--of-text-xl);
}

/* "Was die Bridge bei dir lokal macht" geht ueber die volle Breite ganz unten */
.ofma-bridge-setup__details {
    grid-column: 1 / -1;
}

/* ── Upgrade-Teaser für Cash Flow Basis ──────────────────────────── */
.ofma-bridge-setup__teaser {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 14px;
    padding: 40px 32px;
    text-align: center;
}
.ofma-bridge-setup__teaser-icon { font-size: var(--of-text-5xl); margin-bottom: 12px; }
.ofma-bridge-setup__teaser h2 {
    font-size: var(--of-text-3xl); font-weight: 700; margin: 0 0 16px;
    color: var(--of-text-primary, #1f2937);
}
.ofma-bridge-setup__teaser p {
    max-width: 540px; margin: 0 auto 14px;
    color: var(--of-text-secondary, #475569);
}
.ofma-bridge-setup__upgrade-btn {
    display: inline-block; margin-top: 18px;
    padding: 12px 28px; border-radius: 8px;
    background: #14b8a6; color: #fff !important;
    font-weight: 600; text-decoration: none;
    transition: background 0.15s ease;
}
.ofma-bridge-setup__upgrade-btn:hover { background: #0d9488; }

/* ── Defender-Notice oben ────────────────────────────────────────── */
.ofma-bridge-setup__notice {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 28px;
}
.ofma-bridge-setup__notice-icon { font-size: var(--of-text-2xl); flex-shrink: 0; }
.ofma-bridge-setup__notice strong { color: #b45309; }
.ofma-bridge-setup__why { margin-top: 10px; }
.ofma-bridge-setup__why summary {
    cursor: pointer; font-size: var(--of-text-base); font-weight: 600; color: #b45309;
}
.ofma-bridge-setup__why p {
    margin: 10px 0 0; font-size: var(--of-text-base);
    color: var(--of-text-secondary, #475569);
}

/* ── 3-Schritt-Liste ─────────────────────────────────────────────── */
.ofma-bridge-setup__steps {
    list-style: none; padding: 0; margin: 0 0 32px;
    counter-reset: setup-step;
}
.ofma-bridge-setup__step {
    display: flex; gap: 18px;
    background: #fff;
    border: 1px solid var(--of-border, #e5e7eb);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 18px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
/* Gesperrte und freigeschaltete Schritte gab es, solange der Download hinter
   einem Haekchen fuer die Virenscanner-Ausnahme lag. Mit dem MSI-Paket entfaellt
   dieser Schritt, damit auch die beiden Zustaende. */
.ofma-bridge-setup__step-num {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #14b8a6; color: #fff;
    font-weight: 700; font-size: var(--of-text-xl);
    display: flex; align-items: center; justify-content: center;
}
.ofma-bridge-setup__step-body { flex: 1; min-width: 0; }
.ofma-bridge-setup__step-body h2 {
    font-size: var(--of-text-xl); font-weight: 700; margin: 0 0 8px;
}
.ofma-bridge-setup__step-body p {
    margin: 0 0 14px;
    color: var(--of-text-secondary, #475569);
}
/* Nummerierte/aufgezaehlte Liste OHNE eigene Klasse (z. B. Schritt 4):
   sauberer haengender Einzug — Markierung aussen, umbrechende Zeilen ruecken
   unter den Text ein (nicht unter die Zahl). */
.ofma-bridge-setup__step-body ol:not([class]),
.ofma-bridge-setup__step-body ul:not([class]) {
    margin: 10px 0 16px;
    padding-left: 24px;
    list-style-position: outside;
    color: var(--of-text-secondary, #475569);
    font-size: var(--of-text-md);
}
.ofma-bridge-setup__step-body ol:not([class]) { list-style-type: decimal; }
.ofma-bridge-setup__step-body ul:not([class]) { list-style-type: disc; }
.ofma-bridge-setup__step-body ol:not([class]) > li,
.ofma-bridge-setup__step-body ul:not([class]) > li {
    margin-bottom: 8px;
    line-height: 1.55;
    padding-left: 4px;
}

/* ── PowerShell-Code-Block mit Copy-Button ───────────────────────── */
.ofma-bridge-setup__codeblock {
    position: relative;
    margin: 14px 0;
}
.ofma-bridge-setup__codeblock pre {
    background: #0f172a; color: #e2e8f0;
    padding: 14px 16px; padding-right: 100px;
    border-radius: 8px;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
    font-size: var(--of-text-base); line-height: 1.5;
    overflow-x: auto;
    margin: 0;
    white-space: pre;
}
.ofma-bridge-setup__copy-btn {
    position: absolute; top: 8px; right: 8px;
    background: #1e293b; color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: var(--of-text-sm); font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ofma-bridge-setup__copy-btn:hover { background: #334155; }
.ofma-bridge-setup__copy-btn--copied { background: #10b981; border-color: #059669; }

/* ── Step-Anleitung ──────────────────────────────────────────────── */
.ofma-bridge-setup__inst {
    margin: 10px 0 16px 18px;
    padding: 0; font-size: var(--of-text-md);
    color: var(--of-text-secondary, #475569);
}
.ofma-bridge-setup__inst li { margin-bottom: 4px; }
.ofma-bridge-setup__inst kbd {
    display: inline-block;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: ui-monospace, monospace;
    font-size: var(--of-text-sm); font-weight: 600;
    color: #334155;
}

/* ── "Welche AV?"-Detection-Hint + Subheadings in Schritt 1 ──────── */
.ofma-bridge-setup__detect {
    background: rgba(245, 158, 11, 0.06);
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: var(--of-text-base) !important;
    color: var(--of-text-secondary, #475569) !important;
}
.ofma-bridge-setup__sub {
    font-size: var(--of-text-md);
    font-weight: 700;
    color: var(--of-text-primary, #1e293b);
    margin: 18px 0 6px;
    padding-top: 12px;
    border-top: 1px solid var(--of-border, #e5e7eb);
}
.ofma-bridge-setup__sub:first-of-type {
    border-top: none;
    padding-top: 0;
}
[data-theme="dark"] .ofma-bridge-setup__sub {
    color: #e2e8f0;
    border-top-color: #334155;
}

/* AV-spezifische Pfad-Liste */
.ofma-bridge-setup__av-list {
    margin: 6px 0 10px;
    padding-left: 20px;
    list-style: disc;
    font-size: var(--of-text-base);
    color: var(--of-text-secondary, #475569);
}
.ofma-bridge-setup__av-list li {
    margin-bottom: 8px;
    line-height: 1.45;
}

/* ── Alternative (GUI-Weg bei Tamper-Protection-Block / 3rd-party-AV) ─ */
.ofma-bridge-setup__alt {
    margin: 14px 0 16px;
    background: #f8fafc;
    border: 1px solid var(--of-border, #e5e7eb);
    border-radius: 8px;
    padding: 0 14px;
}
.ofma-bridge-setup__alt summary {
    cursor: pointer;
    padding: 10px 0;
    font-weight: 600;
    font-size: var(--of-text-base);
    color: var(--of-text-secondary, #475569);
    list-style: none;
}
.ofma-bridge-setup__alt summary::-webkit-details-marker { display: none; }
.ofma-bridge-setup__alt summary::before {
    content: "▸ ";
    display: inline-block;
    color: #14b8a6;
    transition: transform 0.15s ease;
}
.ofma-bridge-setup__alt[open] summary::before { content: "▾ "; }
.ofma-bridge-setup__alt p {
    margin: 6px 0 10px;
    font-size: var(--of-text-base);
    color: var(--of-text-secondary, #475569);
}
.ofma-bridge-setup__alt code {
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    color: #0f172a;
}
[data-theme="dark"] .ofma-bridge-setup__alt { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .ofma-bridge-setup__alt code { background: #1e293b; color: #e2e8f0; }

/* ── Step-1-Done-Checkbox ────────────────────────────────────────── */
.ofma-bridge-setup__done {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 6px; cursor: pointer;
    padding: 8px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.15s ease;
}
.ofma-bridge-setup__done:hover { background: #f1f5f9; }
.ofma-bridge-setup__done input { width: 16px; height: 16px; accent-color: #14b8a6; }

/* ── Download-Button (Schritt 2) ─────────────────────────────────── */
.ofma-bridge-setup__dl-btn {
    display: inline-flex; flex-direction: column; align-items: center;
    margin: 8px 0;
    padding: 18px 32px;
    background: #14b8a6; color: #fff !important;
    border-radius: 10px;
    font-weight: 700; font-size: var(--of-text-lg);
    text-decoration: none;
    transition: background 0.15s ease;
}
.ofma-bridge-setup__dl-btn:hover { background: #0d9488; }
/* Windows + Mac nebeneinander */
.ofma-bridge-setup__dl-row {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch;
}
/* Mac: Platzhalter (noch nicht verfuegbar) — nicht anklickbar, ausgegraut */
.ofma-bridge-setup__dl-btn--soon {
    background: var(--of-bg-subtle, #f1f5f9);
    color: var(--of-text-muted, #64748b) !important;
    box-shadow: inset 0 0 0 1px var(--of-border, #e2e8f0);
    cursor: not-allowed;
}
.ofma-bridge-setup__dl-btn--soon:hover { background: var(--of-bg-subtle, #f1f5f9); }
/* OS-Logo (Windows/Apple) inline mit dem Button-Text */
.ofma-bridge-setup__dl-label { display: inline-flex; align-items: center; }
.ofma-bridge-setup__dl-ico { width: 22px; height: 22px; margin-right: 9px; flex: none; }
.ofma-bridge-setup__dl-meta {
    font-size: var(--of-text-xs); font-weight: 500;
    opacity: 0.85; margin-top: 4px;
}
.ofma-bridge-setup__dl-hint {
    font-size: var(--of-text-base);
    color: var(--of-text-muted, #64748b);
    margin: 10px 0 0;
}

/* ── Open-Bridge-Button (Schritt 3) ──────────────────────────────── */
.ofma-bridge-setup__open-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 8px;
    padding: 10px 18px;
    background: #fff;
    color: #14b8a6 !important;
    border: 1.5px solid #14b8a6;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ofma-bridge-setup__open-btn:hover { background: rgba(20, 184, 166, 0.05); }

/* ── Success-Bestätigung ─────────────────────────────────────────── */
.ofma-bridge-setup__success {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(16, 185, 129, 0.08);
    border-left: 4px solid #10b981;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 36px;
}
.ofma-bridge-setup__success-icon { font-size: var(--of-text-2xl); flex-shrink: 0; }

/* ── Troubleshooting-Akkordeon ───────────────────────────────────── */
.ofma-bridge-setup__troubleshooting h2 {
    font-size: var(--of-text-2xl); font-weight: 700; margin: 0 0 14px;
}
.ofma-bridge-setup__faq {
    border: 1px solid var(--of-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
}
.ofma-bridge-setup__faq summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    color: var(--of-text-primary, #1f2937);
    list-style: none;
}
.ofma-bridge-setup__faq summary::-webkit-details-marker { display: none; }
.ofma-bridge-setup__faq summary::after {
    content: "+"; float: right;
    font-size: var(--of-text-2xl); font-weight: 400;
    color: var(--of-text-muted, #94a3b8);
    line-height: 1;
    transition: transform 0.2s ease;
}
.ofma-bridge-setup__faq[open] summary::after { content: "−"; }
.ofma-bridge-setup__faq p {
    margin: 0 18px 14px;
    color: var(--of-text-secondary, #475569);
    font-size: var(--of-text-md);
}
/* Nummerierte/Aufzählungs-Listen im FAQ genauso wie die Absätze — sonst erben
   sie die zentrale Theme-Schriftgröße und wirken größer als der Einleitungssatz. */
.ofma-bridge-setup__faq ol,
.ofma-bridge-setup__faq ul {
    margin: 0 18px 14px;
    padding-left: 22px;
    color: var(--of-text-secondary, #475569);
    font-size: var(--of-text-md);
}
.ofma-bridge-setup__faq li { margin-bottom: 6px; }
.ofma-bridge-setup__faq code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 1em;
    color: #1e293b;
}
/* Saubere Monospace für allen Inline-Code (sonst hässliches Courier-New-Fallback,
   z. B. in der Aufklapp-Überschrift „PowerShell meldet Fehler 0x800106ba"). */
.ofma-bridge-setup__faq code,
.ofma-bridge-setup__details code,
.ofma-bridge-setup__inst code,
.ofma-bridge-setup__step-body code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Segoe UI Mono", Menlo, monospace;
}
/* Im Aufklapp-Titel (summary) den Code NICHT verkleinern — sonst wirkt der
   Fehlercode „0x800106ba" kleiner als der Text daneben. */
.ofma-bridge-setup__faq summary code {
    font-size: 1em;
}

/* ── Details-Block "Was die Bridge bei dir macht" ────────────────── */
.ofma-bridge-setup__details {
    margin-top: 36px; padding-top: 24px;
    border-top: 1px solid var(--of-border, #e5e7eb);
}
.ofma-bridge-setup__details h2 {
    font-size: var(--of-text-xl); font-weight: 700; margin: 0 0 12px;
    color: var(--of-text-secondary, #475569);
}
.ofma-bridge-setup__details ul {
    list-style: disc;
    padding-left: 22px;
    color: var(--of-text-secondary, #475569);
    font-size: var(--of-text-md);
}
.ofma-bridge-setup__details li { margin-bottom: 6px; }
.ofma-bridge-setup__details code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    color: #1e293b;
}

/* ── Dark Mode (falls Theme-Toggle aktiv ist) ────────────────────── */
[data-theme="dark"] .ofma-bridge-setup__step { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ofma-bridge-setup__faq { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ofma-bridge-setup__inst kbd { background: #1e293b; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .ofma-bridge-setup__done { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ofma-bridge-setup__inst code,
[data-theme="dark"] .ofma-bridge-setup__faq code,
[data-theme="dark"] .ofma-bridge-setup__details code {
    background: #0f172a; color: #e2e8f0;
}

/* ── Responsive (Mobile) ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .ofma-bridge-setup__header h1 { font-size: var(--of-text-3xl); }
    .ofma-bridge-setup__step { padding: 18px 16px; gap: 12px; }
    .ofma-bridge-setup__step-num { width: 32px; height: 32px; font-size: var(--of-text-md); }
    .ofma-bridge-setup__codeblock pre { padding-right: 16px; font-size: var(--of-text-xs); }
    .ofma-bridge-setup__copy-btn {
        position: static; display: block; margin-top: 8px;
    }
    .ofma-bridge-setup__dl-btn { width: 100%; padding: 16px; }
}

/* ── Desktop-only: Schritt 2 (Download) + 3 (Start) brauchen die TWS und laufen
   nur am PC. Auf dem Smartphone die Aktions-Buttons deaktivieren + Hinweis zeigen.
   Gilt in beiden Kontexten (Account-Tab + Standalone /bridge-einrichten/). ── */
.ofma-bridge-setup__desktop-only { display: none; }
@media (max-width: 600px) {
    .ofma-bridge-setup__desktop-only { display: flex; margin-top: 12px; margin-bottom: 0; }
    .ofma-bridge-setup__dl-btn,
    .ofma-bridge-setup__open-btn {
        pointer-events: none;
        opacity: 0.45;
        cursor: not-allowed;
        filter: grayscale(1);
    }
}