/* MOL-GOD v3.9.7 — UX REDESIGN + CONSISTENCY NORMALIZER
 * Audit ujawnil 3,366 inline style attrs / 72 kolory / 13 border-radius / 384 tiny fonts.
 * Bez refaktora 70+ klas akordeonow: globalny reset + design tokens + min font-size guard.
 */

/* ── Design tokens (nadpisuja chaotyczne inline kolory przez :is() inheritance) ── */
.molgod-lazy-wrap {
    --molgod-text:        #1a1d2e;
    --molgod-text-soft:   #475569;
    --molgod-text-mute:   #64748b;
    --molgod-text-faint:  #94a3b8;
    --molgod-accent:      #4466cc;
    --molgod-accent-2:    #7691e5;
    --molgod-success:     #166534;
    --molgod-warning:     #b45309;
    --molgod-danger:      #b91c1c;
    --molgod-bg:          #ffffff;
    --molgod-bg-soft:     #f8fafc;
    --molgod-bg-card:     #fafbfd;
    --molgod-border:      #e8edf5;
    --molgod-border-soft: #eef1f7;
    --molgod-radius:      8px;
    --molgod-radius-lg:   12px;
}

/* ── Min font-size guard (audit: 384 inline 10px tiny fonts dla mobile = nieczytelne) ── */
.molgod-lazy-item *,
.molgod-lazy-item__details * {
    font-size: max(11px, var(--mg-font-min, 12px));
}
.molgod-lazy-item [style*="font-size:10px"],
.molgod-lazy-item [style*="font-size: 10px"],
.molgod-lazy-item [style*="font-size:9px"],
.molgod-lazy-item [style*="font-size: 9px"],
.molgod-lazy-item [style*="font-size:8px"] {
    font-size: 12px !important;
}

/* ── Min line-height dla czytelnosci ── */
.molgod-lazy-item p,
.molgod-lazy-item div,
.molgod-lazy-item li {
    line-height: max(1.45, 1.5);
}

/* ── Forsuj sensible color contrast: przyciemnij szare ponizej WCAG AA ── */
.molgod-lazy-item [style*="color:#889"],
.molgod-lazy-item [style*="color:#99a"],
.molgod-lazy-item [style*="color:#aaa"],
.molgod-lazy-item [style*="color:#ccc"],
.molgod-lazy-item [style*="color:#bbb"] {
    color: var(--molgod-text-mute) !important;
}

/* ── Ujednolic border-radius (audit: 13 wariantow 2/3/4/5/6/8/10/12/14/20px) ── */
.molgod-lazy-item [style*="border-radius:2px"],
.molgod-lazy-item [style*="border-radius:3px"],
.molgod-lazy-item [style*="border-radius:4px"],
.molgod-lazy-item [style*="border-radius:5px"],
.molgod-lazy-item [style*="border-radius:14px"],
.molgod-lazy-item [style*="border-radius:20px"] {
    border-radius: var(--molgod-radius) !important;
}

/* ── Globalny font stack (zapobiega serif fallbackom z motywu) ── */
.molgod-lazy-wrap,
.molgod-lazy-wrap * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ── Tabela responsywnosc (akordeony emituja <table> z fixed width) ── */
.molgod-lazy-item table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    font-size: 12px;
}
.molgod-lazy-item table th,
.molgod-lazy-item table td {
    padding: 6px 10px;
    border: 1px solid var(--molgod-border);
    text-align: left;
    vertical-align: top;
}
.molgod-lazy-item table th {
    background: var(--molgod-bg-soft);
    font-weight: 600;
    color: var(--molgod-text);
}

/* ── Mobile: tabele scrollowalne aby nie psuly layoutu ── */
@media (max-width: 600px) {
    .molgod-lazy-item table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Linki w akordeonach: konsystentny accent color ── */
.molgod-lazy-item a {
    color: var(--molgod-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.molgod-lazy-item a:hover {
    color: var(--molgod-text);
}

/* ── Code/SMILES blocks ── */
.molgod-lazy-item code,
.molgod-lazy-item pre {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", "Fira Code", Consolas, monospace;
    background: var(--molgod-bg-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.molgod-lazy-item pre {
    padding: 12px;
    overflow-x: auto;
    line-height: 1.5;
}

/* ── ORYGINAL UX styles (loader bar + sekcje + items) ──────────────── */


.molgod-lazy-wrap {
    max-width: 100%;
    margin: 18px 0 24px;
}

/* ── Loader bar ──────────────────────────────────────────────── */

.molgod-lazy-loader {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    background: #fafbfd;
    border: 1px solid #e8edf5;
    border-radius: 10px;
    margin-bottom: 18px;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.molgod-lazy-loader--fading {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

/* v3.9.9: hidden duplicate confidence badge (zostaje w DOM dla screen reader) */
.molgod-badge-hidden-dup {
    display: none !important;
}

/* v3.9.8: info state gdy 0 slotow wypelnionych */
.molgod-lazy-loader--info {
    background: #fffbeb;
    border-color: #fcd34d;
}
.molgod-lazy-loader--info .molgod-lazy-loader__bar {
    display: none;
}
.molgod-lazy-loader--info .molgod-lazy-loader__text {
    color: #78350f;
    font-size: 13px;
    line-height: 1.5;
}

.molgod-lazy-loader__bar {
    width: 100%;
    height: 4px;
    background: #e8edf5;
    border-radius: 4px;
    overflow: hidden;
}

.molgod-lazy-loader__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4466cc 0%, #7691e5 50%, #4466cc 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    animation: molgod-lazy-shimmer 1.6s linear infinite;
}

@keyframes molgod-lazy-shimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.molgod-lazy-loader__text {
    font-size: 13px;
    color: #555a66;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.molgod-lazy-loader__icon {
    font-size: 16px;
}

.molgod-lazy-loader__count {
    color: #889;
    font-size: 12px;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.molgod-lazy-loader[data-state="empty"] .molgod-lazy-loader__text {
    color: #889;
}

/* ── Sekcje grupujace ─────────────────────────────────────────── */

.molgod-lazy-sections {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.molgod-lazy-section {
    border-top: 1px solid #eef1f7;
    padding-top: 16px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.molgod-lazy-section--revealed {
    opacity: 1;
    transform: translateY(0);
}

.molgod-lazy-section__title {
    font-size: 15px;
    font-weight: 600;
    color: #2a2f3e;
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    letter-spacing: -0.01em;
}

.molgod-lazy-section__icon {
    font-size: 18px;
    line-height: 1;
}

.molgod-lazy-section__count {
    font-size: 12px;
    color: #99a;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.molgod-lazy-section__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Pojedynczy akordeon (item) ──────────────────────────────── */

.molgod-lazy-item {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.molgod-lazy-item--visible {
    opacity: 1;
    transform: translateY(0);
}

.molgod-lazy-item__details {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 8px;
    overflow: hidden;
}

.molgod-lazy-item__details > summary {
    padding: 12px 16px;
    font-weight: 600;
    color: #1a1d2e;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.molgod-lazy-item__details > summary::-webkit-details-marker { display: none; }

.molgod-lazy-item__details > summary::after {
    content: "▾";
    float: right;
    color: #99a;
    transition: transform 0.2s ease;
}

.molgod-lazy-item__details[open] > summary::after {
    transform: rotate(180deg);
}

/* v3.9.16 W27.16 #3: Globalny override strzalek dla wszystkich klas akordeonow MOL-GOD.
 * Klasy emitujace native <details> marker lub rozne znaki (►/▼/→) dostaja spojny ▾.
 * Dziala dla .mol-god-accordion, .molgod-acc (klasyczne klasy emitowane przez 70+ akordeonow). */
.molgod-lazy-wrap details > summary::-webkit-details-marker,
.mol-god-accordion > summary::-webkit-details-marker,
.molgod-acc > summary::-webkit-details-marker {
    display: none !important;
}
.mol-god-accordion > summary,
.molgod-acc > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding-right: 28px;
}
.mol-god-accordion > summary::after,
.molgod-acc > summary::after {
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    transition: transform 0.2s ease;
    font-size: 14px;
    line-height: 1;
}
.mol-god-accordion[open] > summary::after,
.molgod-acc[open] > summary::after {
    transform: translateY(-50%) rotate(180deg);
}

/* v3.9.16 W27.16 #4: spojny rozmiar/alignment emoji w 6 sub-akordeonach Frontend_Modules.
 * Each emoji teraz ma class .molgod-acc__emoji zeby CSS mogl unifikowac wizualnie
 * (rozne emoji ☢/📋/🧮/📄/📦/🔄 maja rozne metryki w domyslnym fontowaniu). */
.molgod-acc__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

.molgod-lazy-item__details > summary:hover {
    background: #f7f9fc;
}

.molgod-lazy-item__details[open] > summary {
    border-bottom: 1px solid #f0f3f8;
}

/* ── Reduced motion ──────────────────────────────────────────── */

/* v3.9.16 W27.16 #2: Print-friendly styles (drukowanie strony produktu = wszystkie akordeony rozwiniete + bez animacji) */
@media print {
    .molgod-lazy-loader,
    .molgod-lazy-loader__bar,
    .molgod-lazy-loader__fill,
    .molgod-skeleton,
    .molgod-spinner {
        display: none !important;
    }
    .molgod-lazy-section,
    .molgod-lazy-item {
        opacity: 1 !important;
        transform: none !important;
        page-break-inside: avoid;
        animation: none !important;
        transition: none !important;
    }
    .molgod-lazy-section[hidden] {
        display: block !important;
    }
    .molgod-lazy-item__details {
        page-break-inside: avoid;
        border: 1px solid #999 !important;
        background: #fff !important;
        margin: 8px 0;
    }
    .molgod-lazy-item__details > summary {
        background: #f0f0f0 !important;
        color: #000 !important;
        font-weight: 700;
        page-break-after: avoid;
    }
    .molgod-lazy-item__details > summary::after {
        display: none !important; /* Strzałka zbędna w druku */
    }
    /* Wymuszenie open dla wszystkich <details> w druku — Firefox/Chrome/Safari różnie traktują */
    details[open] > *,
    details > * {
        display: block !important;
    }
    .molgod-lazy-section__title {
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
        padding-bottom: 4px;
        margin-top: 16px;
    }
    .molgod-lazy-item a {
        color: #000 !important;
        text-decoration: underline;
    }
    .molgod-lazy-item a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10px;
        color: #555;
    }
}

@media (prefers-reduced-motion: reduce) {
    .molgod-lazy-loader,
    .molgod-lazy-loader__fill,
    .molgod-lazy-section,
    .molgod-lazy-item {
        transition: none;
        animation: none;
    }
    .molgod-lazy-loader__fill { background: #4466cc; }
}

/* ── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .molgod-lazy-section__title { font-size: 14px; }
    .molgod-lazy-loader { padding: 12px 14px; }
    .molgod-lazy-loader__text { font-size: 12px; }
}