/**
 * MOL-GOD v3.1.4 — HPLC Light Theme Overrides
 *
 * USER feedback: "Granatowy za agresywny! Czcionki są niewidoczne na granacie!"
 * "Nie współgra z ładnymi tabelkami!"
 *
 * Zamiana ciemnych granatów (#1f2937, #4f46e5, #1e3a8a, #312e81 etc.)
 * na jasne tła z kontrastowymi akcentami. Wzorzec materiał: białe karty
 * + lekka biała / błękitna pastela + ciemny tekst.
 *
 * Reguły:
 * - Tło ZAWSZE jasne (white / #f8fafc / #fff7ed itd.)
 * - Tekst ZAWSZE ciemny (#1e293b / #334155)
 * - Akcenty kolor (border-left, ikony, badge) — kolorowe
 * - Granat tylko jako BORDER, nigdy jako FILL pod tekstem
 *
 * !important wymuszone bo legacy CSS jest enqueued przed nami.
 *
 * @package MOL_GOD
 * @version 3.1.4
 */

/* ════════════════════════════════════════════════════════════
   1. "Jak zacząć? (3 minuty)" — quick start kroki
   ════════════════════════════════════════════════════════════ */

.molgod-hplc-quickstart {
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 2px dashed #93c5fd !important;
    padding: 18px 20px !important;
    border-radius: 12px !important;
    margin: 16px 0 !important;
}

.molgod-hplc-quickstart h4 {
    color: #1e3a8a !important;
    background: transparent !important;
    margin: 0 0 14px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.molgod-hplc-steps {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 12px 0 !important;
}

.molgod-hplc-step {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-top: 3px solid #3b82f6 !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    flex: 1 1 200px !important;
    min-width: 180px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.molgod-hplc-step strong {
    color: #1e293b !important;
    background: transparent !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.molgod-hplc-step small {
    color: #475569 !important;
    background: transparent !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.molgod-hplc-step-num {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.molgod-hplc-step-arrow {
    align-self: center !important;
    color: #94a3b8 !important;
    background: transparent !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    padding: 0 4px !important;
}

/* CTA button "Pobierz metodę dla mojego HPLC" */
.molgod-hplc-cta-primary {
    display: block !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 14px 20px !important;
    margin-top: 14px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    box-shadow: 0 2px 6px rgba(22,163,74,0.3) !important;
    transition: transform 0.15s ease !important;
}
.molgod-hplc-cta-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(22,163,74,0.4) !important;
}

/* ════════════════════════════════════════════════════════════
   2. Savings comparison table — "BEZ SYSTEMU / Z SYSTEMEM / OSZCZĘDNOŚĆ"
   ════════════════════════════════════════════════════════════ */

.molgod-hplc-savings {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 16px 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.molgod-hplc-savings thead {
    background: #f1f5f9 !important;
}

.molgod-hplc-savings thead th {
    background: transparent !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-align: left !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-transform: none !important;
}

/* Konkretne kolumny — kontrast bez agresywnego granatu */
.molgod-hplc-savings thead th:nth-child(2) {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-bottom-color: #fecaca !important;
}
.molgod-hplc-savings thead th:nth-child(3) {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-bottom-color: #bbf7d0 !important;
}
.molgod-hplc-savings thead th:nth-child(4) {
    background: #fefce8 !important;
    color: #854d0e !important;
    border-bottom-color: #fde68a !important;
}

.molgod-hplc-savings tbody tr {
    background: #ffffff !important;
}
.molgod-hplc-savings tbody tr:nth-child(even) {
    background: #f8fafc !important;
}
.molgod-hplc-savings tbody tr:hover {
    background: #f1f5f9 !important;
}

.molgod-hplc-savings tbody td {
    background: transparent !important;
    color: #1e293b !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.molgod-hplc-savings tbody td:first-child {
    color: #475569 !important;
    font-weight: 600 !important;
}
.molgod-hplc-savings tbody td strong {
    color: #1e293b !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* Oszczędność column highlight */
.molgod-hplc-savings tbody td:last-child {
    background: rgba(254, 240, 138, 0.25) !important;
    color: #854d0e !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════
   3. Scenario columns "❌ Bez systemu" / "✅ Z systemem"
   ════════════════════════════════════════════════════════════ */

.molgod-hplc-scenario-cols {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 14px !important;
    margin: 16px 0 !important;
}

.molgod-hplc-sc-bad {
    background: #fef2f2 !important;
    color: #1e293b !important;
    border: 1px solid #fecaca !important;
    border-left: 5px solid #ef4444 !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
}
.molgod-hplc-sc-good {
    background: #f0fdf4 !important;
    color: #1e293b !important;
    border: 1px solid #bbf7d0 !important;
    border-left: 5px solid #16a34a !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
}
.molgod-hplc-sc-bad h4 {
    color: #991b1b !important;
    background: transparent !important;
    margin: 0 0 10px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}
.molgod-hplc-sc-good h4 {
    color: #166534 !important;
    background: transparent !important;
    margin: 0 0 10px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}
.molgod-hplc-sc-bad ul, .molgod-hplc-sc-good ul {
    margin: 0 !important;
    padding-left: 20px !important;
}
.molgod-hplc-sc-bad li, .molgod-hplc-sc-good li {
    color: #1e293b !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}
.molgod-hplc-sc-bad li strong, .molgod-hplc-sc-good li strong {
    color: #1e293b !important;
    background: transparent !important;
}
.molgod-hplc-sc-bad .molgod-hplc-sc-total {
    background: #ffffff !important;
    color: #991b1b !important;
    border-top: 1px dashed #fca5a5 !important;
    padding: 10px 12px !important;
    margin-top: 12px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.molgod-hplc-sc-good .molgod-hplc-sc-total {
    background: #ffffff !important;
    color: #166534 !important;
    border-top: 1px dashed #86efac !important;
    padding: 10px 12px !important;
    margin-top: 12px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* ════════════════════════════════════════════════════════════
   4. Time badge — był granat, jest blue-50
   ════════════════════════════════════════════════════════════ */

.molgod-time-badge {
    background: #eff6ff !important;
    color: #1e3a8a !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════
   5. Cause-number circle — był #4f46e5, jest gradient niebieski jaśniejszy
   ════════════════════════════════════════════════════════════ */

.molgod-cause-number {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
}

/* ════════════════════════════════════════════════════════════
   6. Method comparison dots
   ════════════════════════════════════════════════════════════ */

.molgod-mc-dot.our {
    background: #3b82f6 !important;
}

/* ════════════════════════════════════════════════════════════
   7. Gradient controls — active button
   ════════════════════════════════════════════════════════════ */

.molgod-gradient-controls button.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* ════════════════════════════════════════════════════════════
   8. Hero / Use case quotes
   ════════════════════════════════════════════════════════════ */

.molgod-hplc-use-case {
    background: #fefce8 !important;
    color: #1e293b !important;
    border-left: 4px solid #eab308 !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    margin: 14px 0 !important;
}
.molgod-hplc-use-case-head {
    color: #854d0e !important;
    background: transparent !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}
.molgod-hplc-use-case blockquote {
    background: transparent !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-style: italic !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.molgod-hplc-use-case blockquote strong {
    color: #1e293b !important;
    background: transparent !important;
    font-style: normal !important;
}

/* ════════════════════════════════════════════════════════════
   9. Globalna ochrona — żaden ciemny granat na tekście body
   ════════════════════════════════════════════════════════════ */

.molgod-hplc-quickstart [style*="background:#1f2937"],
.molgod-hplc-quickstart [style*="background:#1e3a8a"],
.molgod-hplc-quickstart [style*="background:#312e81"],
.molgod-hplc-savings [style*="background:#1f2937"],
.molgod-hplc-savings [style*="background:#1e3a8a"] {
    background: #f8fafc !important;
    color: #1e293b !important;
}

/* High contrast accessibility */
@media (prefers-contrast: high) {
    .molgod-hplc-step,
    .molgod-hplc-savings,
    .molgod-hplc-sc-bad,
    .molgod-hplc-sc-good {
        border-width: 2px !important;
    }
}

/* Print — readable on paper */
@media print {
    .molgod-hplc-step,
    .molgod-hplc-quickstart,
    .molgod-hplc-savings,
    .molgod-hplc-sc-bad,
    .molgod-hplc-sc-good {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000 !important;
    }
}