/* iModules Instruction UI v1 — wspólny system klas dla treści i symulatorów.
   Twarda zasada: wygląd przez klasy; bez style="..." w HTML instrukcji. */
:root{
  --im-doc-bg:#fff;
  --im-doc-soft:#f5f6fa;
  --im-doc-soft-blue:#f0f6ff;
  --im-doc-text:#03081c;
  --im-doc-subtle:#484950;
  --im-doc-muted:#72747e;
  --im-doc-line:#e6e7eb;
  --im-doc-line-soft:#f0f1f5;
  --im-doc-primary:#002eff;
  --im-doc-primary-hover:#0925a1;
  --im-doc-success:#24b26f;
  --im-doc-warning:#f2c533;
  --im-doc-danger:#e23f46;
  --im-doc-radius:12px;
  --im-doc-radius-sm:8px;
  --im-doc-gap:16px;
}

.im-doc-section{margin:28px 0;min-width:0}
.im-doc-section--soft{padding:24px;border-radius:var(--im-doc-radius);background:var(--im-doc-soft)}
.im-doc-section--blue{padding:24px;border-radius:var(--im-doc-radius);background:var(--im-doc-soft-blue)}
.im-doc-section--center{text-align:center}
.im-doc-section__head{display:grid;gap:6px;margin:0 0 18px}
.im-doc-section__head>*{margin:0!important}
.im-doc-eyebrow{display:block;color:var(--im-doc-primary);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.im-doc-title{margin:0!important;color:var(--im-doc-text)!important;font-size:20px!important;line-height:1.35!important;font-weight:700!important}
.im-doc-lead{max-width:900px;margin:0!important;color:var(--im-doc-subtle)!important;font-size:15px!important;line-height:1.65!important}
.im-doc-muted{color:var(--im-doc-muted)!important}
.im-doc-center{text-align:center}.im-doc-center .im-doc-lead{margin-left:auto!important;margin-right:auto!important}

.im-doc-stack{display:grid;gap:16px}.im-doc-stack--sm{gap:10px}.im-doc-stack--lg{gap:24px}
.im-doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;min-width:0}
.im-doc-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.im-doc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.im-doc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.im-doc-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.im-doc-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.im-doc-columns--wide-left{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)}
.im-doc-columns--wide-right{grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr)}

.im-doc-card{min-width:0;padding:18px;border:1px solid var(--im-doc-line);border-radius:var(--im-doc-radius);background:var(--im-doc-bg)}
.im-doc-card--soft{border-color:transparent;background:var(--im-doc-soft)}
.im-doc-card--blue{border-color:#d9e5ff;background:var(--im-doc-soft-blue)}
.im-doc-card--compact{padding:14px}
.im-doc-card__icon{display:grid;place-items:center;width:34px;height:34px;margin:0 0 12px;border-radius:9px;background:var(--im-doc-soft-blue);color:var(--im-doc-primary);font-size:17px;font-weight:700}
.im-doc-card__title{margin:0 0 7px!important;color:var(--im-doc-text)!important;font-size:14px!important;line-height:1.4!important;font-weight:700!important}
.im-doc-card__text{margin:0!important;color:var(--im-doc-subtle)!important;font-size:13px!important;line-height:1.65!important}

.im-doc-list{display:grid;gap:8px;margin:0!important;padding:0!important;list-style:none!important}
.im-doc-list li{position:relative;margin:0!important;padding-left:20px;color:var(--im-doc-subtle)}
.im-doc-list li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--im-doc-primary);transform:translateY(-50%)}
.im-doc-list--check li{padding-left:24px}
.im-doc-list--check li::before{content:"✓";top:.08em;width:auto;height:auto;border-radius:0;background:transparent;color:var(--im-doc-success);font-size:14px;font-weight:800;transform:none}

.im-doc-callout{padding:14px 16px;border-left:3px solid var(--im-doc-primary);border-radius:0 var(--im-doc-radius-sm) var(--im-doc-radius-sm) 0;background:var(--im-doc-soft-blue);color:var(--im-doc-subtle)}
.im-doc-callout>*:first-child{margin-top:0!important}.im-doc-callout>*:last-child{margin-bottom:0!important}
.im-doc-callout--success{border-left-color:var(--im-doc-success);background:#ebfaf3}
.im-doc-callout--warning{border-left-color:var(--im-doc-warning);background:#faf6eb}
.im-doc-callout--danger{border-left-color:var(--im-doc-danger);background:#faebec}

.im-doc-badge,.im-instruction-tag{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:24px;padding:4px 8px;border-radius:999px;background:var(--im-doc-soft);color:var(--im-doc-subtle);font-size:11px;font-weight:700;line-height:1;white-space:nowrap}
.im-doc-badge--blue,.im-instruction-tag--blue{background:#eaf1ff;color:#0925a1}
.im-doc-badge--green,.im-instruction-tag--green{background:#ebfaf3;color:#054024}
.im-doc-badge--amber,.im-instruction-tag--amber{background:#faf6eb;color:#6a5200}
.im-doc-badge--red,.im-instruction-tag--red{background:#faebec;color:#731418}
.im-doc-badge--violet,.im-instruction-tag--violet{background:#f4efff;color:#5b21b6}
.im-doc-badge--gray,.im-instruction-tag--gray{background:#f0f1f5;color:#484950}
.im-instruction-tag--sm{font-size:9px;min-height:20px;padding:3px 6px}.im-instruction-tag--md{font-size:11px}.im-instruction-tag--lg{font-size:13px;min-height:28px;padding:5px 9px}
.im-instruction-tag--regular{font-weight:500}.im-instruction-tag--semibold{font-weight:600}.im-instruction-tag--bold{font-weight:700}
.im-instruction-tag--square{border-radius:4px}.im-instruction-tag--soft{border-radius:8px}.im-instruction-tag--pill{border-radius:999px}

.im-doc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.im-doc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:1px solid var(--im-doc-line);border-radius:9px;background:#fff;color:var(--im-doc-text)!important;font-size:12px!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;cursor:pointer}
.im-doc-btn:hover{border-color:#cbcdd1;background:var(--im-doc-soft)}
.im-doc-btn--primary{border-color:var(--im-doc-primary);background:var(--im-doc-primary);color:#fff!important}
.im-doc-btn--primary:hover{border-color:var(--im-doc-primary-hover);background:var(--im-doc-primary-hover)}

.im-doc-media{display:grid;place-items:center;min-width:0;overflow:hidden;border-radius:var(--im-doc-radius);background:var(--im-doc-soft)}
.im-doc-media img,.im-doc-media video{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.im-doc-media--plain{background:transparent}
.im-doc-divider{height:1px;margin:24px 0;background:var(--im-doc-line-soft)}

.im-doc-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.im-doc-kpi{padding:16px;border:1px solid var(--im-doc-line);border-radius:var(--im-doc-radius);background:#fff}
.im-doc-kpi__value{display:block;margin-bottom:3px;color:var(--im-doc-text);font-size:24px;font-weight:700;line-height:1.15}
.im-doc-kpi__label{color:var(--im-doc-muted);font-size:11px;line-height:1.4}

/* Wspólne elementy interaktywnych symulatorów */
.im-doc-demo{display:grid;gap:16px;width:100%;min-width:0;color:var(--im-doc-text)}
.im-doc-demo__panel{min-width:0;padding:16px;border:1px solid var(--im-doc-line);border-radius:var(--im-doc-radius);background:#fff}
.im-doc-demo__panel--soft{border-color:transparent;background:var(--im-doc-soft)}
.im-doc-demo__toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:0 0 12px}
.im-doc-demo__preview{display:grid;place-items:center;min-height:220px;padding:18px;overflow:hidden;border-radius:var(--im-doc-radius);background:var(--im-doc-soft)}
.im-doc-fields{display:grid;gap:12px}
.im-doc-field{display:grid;gap:6px;min-width:0}
.im-doc-field>label,.im-doc-field__label{color:var(--im-doc-text);font-size:11px;font-weight:700}
.im-doc-field input,.im-doc-field select,.im-doc-field textarea{width:100%;min-height:40px;padding:9px 11px;border:1px solid #cbcdd1;border-radius:8px;background:#fff;color:var(--im-doc-text);font:inherit;font-size:12px;outline:0}
.im-doc-field textarea{min-height:90px;resize:vertical;line-height:1.5}
.im-doc-field input:focus,.im-doc-field select:focus,.im-doc-field textarea:focus{border-color:var(--im-doc-primary);box-shadow:0 0 0 3px rgba(0,46,255,.08)}
.im-doc-field__help{color:var(--im-doc-muted);font-size:10px;line-height:1.45}
.im-doc-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:10px;background:var(--im-doc-soft)}
.im-doc-tab{min-height:34px;padding:0 11px;border:0;border-radius:7px;background:transparent;color:var(--im-doc-subtle);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.im-doc-tab.is-active{background:#fff;color:var(--im-doc-text);box-shadow:0 1px 4px rgba(3,8,28,.08)}

/* Klasy szerokości zamiast style="--im-image-width:..." */
.im-instruction-image{width:100%}
.im-instruction-image--w20{width:20%}.im-instruction-image--w25{width:25%}.im-instruction-image--w30{width:30%}.im-instruction-image--w35{width:35%}.im-instruction-image--w40{width:40%}.im-instruction-image--w45{width:45%}.im-instruction-image--w50{width:50%}.im-instruction-image--w55{width:55%}.im-instruction-image--w60{width:60%}.im-instruction-image--w65{width:65%}.im-instruction-image--w70{width:70%}.im-instruction-image--w75{width:75%}.im-instruction-image--w80{width:80%}.im-instruction-image--w85{width:85%}.im-instruction-image--w90{width:90%}.im-instruction-image--w95{width:95%}.im-instruction-image--w100{width:100%}

@media(max-width:900px){
  .im-doc-grid--4,.im-doc-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .im-doc-columns,.im-doc-columns--wide-left,.im-doc-columns--wide-right{grid-template-columns:1fr}
}
@media(max-width:640px){
  .im-doc-section--soft,.im-doc-section--blue{padding:18px}
  .im-doc-grid,.im-doc-grid--2,.im-doc-grid--3,.im-doc-grid--4,.im-doc-grid--5,.im-doc-kpis{grid-template-columns:1fr}
  .im-doc-card{padding:16px}
  .im-instruction-image[class*="im-instruction-image--w"]{width:100%}
}


/* iModules — dokładne klasy wzorca Slider PRO v27. Dołączyć na końcu css/instructions-components.css */
/* --- wspólny root treści rich_text --- */
.im-doc-root,
.im-doc-section-heading,
.im-doc-info-wrap,
.im-doc-divider-section,
.im-doc-history {
  width: 100%;
  max-width: none;
}

/* --- intro --- */
.im-doc-intro {
  font-size: 17px;
  line-height: 1.75;
  margin: 20px 0 50px;
}

/* --- Korzyści: sam nagłówek, właściwe korzyści w gridzie poniżej --- */
.im-doc-benefits-head {
  margin: 0 0 28px;
}

.im-doc-benefits-head__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.im-doc-benefits-head__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #316CFF;
  font-size: 22px;
  line-height: 1;
}

.im-doc-benefits-head__title {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: #202433;
}

.im-doc-benefits-head__subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: #667085;
}

/* --- 6 głównych kafelków korzyści/funkcji --- */
.im-doc-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  margin: 0 0 22px;
}

.im-doc-feature-card {
  padding: 18px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
}

.im-doc-feature-card__head {
  margin: 0 0 10px;
}

.im-doc-feature-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF3FF;
  border: 1px solid #DBE5FF;
  color: #315EFB;
  font-size: 26px;
  line-height: 1;
  margin: 0 auto 12px;
}

.im-doc-feature-card__title {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #202433;
}

.im-doc-feature-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* --- Najważniejsze możliwości modułu --- */
.im-doc-key-features {
  padding: 20px;
  border-radius: 12px;
  background: #F6F8FF;
  border: 1px solid #DFE5FF;
  margin: 0 0 22px;
}

.im-doc-key-features__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

.im-doc-key-features__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAF1FF;
  border: 1px solid #D7E4FF;
  color: #316CFF;
  font-size: 20px;
  line-height: 1;
}

.im-doc-key-features__title {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: #202433;
}

.im-doc-key-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 28px;
}

.im-doc-key-features__list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #475467;
}

.im-doc-key-features__item {
  margin: 0 0 9px;
}

.im-doc-key-features__item:last-child {
  margin-bottom: 0;
}

/* --- końcowy sprzedażowo-informacyjny callout --- */
.im-doc-summary {
  padding: 18px 20px;
  border-left: 4px solid #315EFB;
  background: #F7F9FF;
  border-radius: 8px;
}

.im-doc-summary__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

/* --- numerowane sekcje 01–04 --- */
.im-doc-section-heading--first {
  margin-top: 50px;
}

.im-doc-section-heading__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.im-doc-section-heading__number {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: #2563EB;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(37,99,235,.18);
}

.im-doc-section-heading__content {
  flex: 1;
  min-width: 260px;
}

.im-doc-section-heading__title {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F172A;
  margin: 2px 0 4px;
}

.im-doc-section-heading--plain .im-doc-section-heading__title {
  margin: 0 0 4px;
}

.im-doc-section-heading__subtitle {
  font-size: 14px;
  line-height: 1.6;
  color: #667085;
  margin: 0;
}

.im-doc-section-heading__plain-content {
  margin: 0 0 16px;
}

/* --- separatory --- */
.im-doc-divider-wrap--major {
  margin: 64px 0 36px;
}

.im-doc-divider--major {
  height: 0;
  margin: 0;
  background: transparent;
  border-top: 2px dotted #D5DDEA;
  box-shadow: 0 -1px 0 rgba(255,255,255,.85), 0 2px 4px rgba(16,24,40,.04);
}

.im-doc-divider-wrap--minor {
  margin: 26px 0 22px;
}

.im-doc-divider--minor {
  height: 0;
  margin: 0;
  background: transparent;
  border-top: 1px solid #E6EBF2;
  box-shadow: 0 1px 0 rgba(255,255,255,.9);
  opacity: .95;
}

/* --- niebieskie boksy objaśniające --- */
.im-doc-info {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: #F6F9FF;
  border: 1px solid #D7E4FF;
  border-left: 4px solid #316CFF;
  border-radius: 12px;
  color: #31425F;
  font-size: 14px;
  line-height: 1.75;
}

.im-doc-info__content {
  width: 100%;
  max-width: 1000px;
  margin: 0;
  text-align: left;
}

/* --- treść w notice --- */
.im-doc-notice__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

/* --- checklista --- */
.im-doc-checklist {
  font-size: 14px;
  line-height: 1.75;
}

/* --- historia aktualizacji --- */
.im-doc-history__row {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 16px 0 18px;
  border-top: 1px solid #E6EBF2;
  border-bottom: 1px solid #E6EBF2;
}

.im-doc-history__date {
  flex: 0 0 120px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: #2563EB;
  padding-top: 1px;
}

.im-doc-history__content {
  flex: 1;
  min-width: 0;
}

.im-doc-history__title {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 8px;
}

.im-doc-history__list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: #475467;
}

/* --- responsywność standardu dokumentacji --- */
@media (max-width: 980px) {
  .im-doc-feature-grid {
    grid-template-columns: 1fr;
  }

  .im-doc-key-features__grid {
    grid-template-columns: 1fr;
  }

  .im-doc-history__row {
    display: block;
  }

  .im-doc-history__date {
    margin: 0 0 8px;
  }
}

/* v1.26.408 — renderer notice: osobny wrapper layoutu, bez przenoszenia stylu boxa */
.im-instruction-notice-wrap {
  width: 100%;
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 30px;
}

@media (max-width: 767px) {
  .im-instruction-notice-wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* v1.26.412 — Instruction Factory: wspólny standard scrollowanych powierzchni imx-* */
.imx-panel{
  overflow:auto;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#aeb3bc #f7f8fa;
}

.imx-panel::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.imx-panel::-webkit-scrollbar-track{
  background:#f7f8fa;
  border-radius:999px;
}

.imx-panel::-webkit-scrollbar-thumb{
  background:#aeb3bc;
  border:2px solid #f7f8fa;
  border-radius:999px;
}

.imx-panel::-webkit-scrollbar-thumb:hover{
  background:#8f96a3;
}

.imx-cselect-list,
.imx-modal-card{
  scrollbar-width:thin;
  scrollbar-color:#aeb3bc #f7f8fa;
}

.imx-cselect-list::-webkit-scrollbar,
.imx-modal-card::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.imx-cselect-list::-webkit-scrollbar-track,
.imx-modal-card::-webkit-scrollbar-track{
  background:#f7f8fa;
  border-radius:999px;
}

.imx-cselect-list::-webkit-scrollbar-thumb,
.imx-modal-card::-webkit-scrollbar-thumb{
  background:#aeb3bc;
  border:2px solid #f7f8fa;
  border-radius:999px;
}

.imx-cselect-list::-webkit-scrollbar-thumb:hover,
.imx-modal-card::-webkit-scrollbar-thumb:hover{
  background:#8f96a3;
}

/* Wspólny chevron dla akordeonów/repeaterów imx-*; SVG obraca się przez stan .open. */
.imx-acc-chevron{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:#667085;
  transition:transform .16s ease;
  flex:0 0 auto;
}

.imx-acc-chevron svg{
  display:block;
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.imx-acc-item.open > .imx-acc-head .imx-acc-chevron{
  transform:rotate(180deg);
}