/* ============================================================
   ARTICLE COMPONENTS
   Стили для кастомных блоков внутри статей (ei-block, схема 5 углов,
   чеклисты, таймлайн, карточки цен и т.д.)
   ============================================================ */


/* ─── Переменные ─── */

:root {
  --ei-teal-50:    #e1f5ee;
  --ei-teal-100:   #9fe1cb;
  --ei-teal-600:   #0f6e56;
  --ei-teal-800:   #085041;
  --ei-purple-50:  #eeedfe;
  --ei-purple-100: #cecbf6;
  --ei-purple-600: #534ab7;
  --ei-purple-800: #3c3489;
  --ei-amber-50:   #faeeda;
  --ei-amber-100:  #fac775;
  --ei-amber-600:  #ba7517;
  --ei-amber-800:  #854f0b;
  --ei-coral-50:   #faece7;
  --ei-coral-100:  #f5c4b3;
  --ei-coral-600:  #993c1d;
  --ei-coral-800:  #712b13;
  --ei-blue-50:    #e6f1fb;
  --ei-blue-100:   #b5d4f4;
  --ei-blue-600:   #185fa5;
  --ei-blue-800:   #0c447c;
  --ei-gray-50:    #f1efe8;
  --ei-gray-800:   #444441;

  --ei-text:       #1a1a18;
  --ei-text-muted: #5f5e5a;
  --ei-text-light: #888780;
  --ei-border:     #d3d1c7;
  --ei-bg:         #ffffff;
  --ei-bg-2:       #f8f7f4;

  --ei-radius-sm:  6px;
  --ei-radius-md:  10px;
  --ei-radius-lg:  14px;
}


/* ─── Базовый блок ─── */

.ei-block {
  font-family: inherit;
  color:       var(--ei-text);
  line-height: 1.6;
}

.ei-block *,
.ei-block *::before,
.ei-block *::after {
  box-sizing: border-box;
}


/* ─── Таблицы ─── */

.ei-table-wrap {
  width:      100%;
  overflow-x: auto;
}

.ei-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       14px;
  line-height:     1.5;
}

.ei-table thead tr {
  background: var(--ei-bg-2);
}

.ei-table th {
  padding:       10px 14px;
  text-align:    left;
  font-weight:   600;
  font-size:     13px;
  color:         var(--ei-text-muted);
  border-bottom: 2px solid var(--ei-border);
  white-space:   nowrap;
}

.ei-table td {
  padding:        10px 14px;
  border-bottom:  1px solid var(--ei-border);
  vertical-align: top;
}

.ei-table tbody tr:last-child td {
  border-bottom: none;
}

.ei-table tbody tr:hover {
  background: var(--ei-bg-2);
}


/* ─── Бейджи ─── */

.ei-badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: 4px;
  font-size:     12px;
  font-weight:   600;
  white-space:   nowrap;
}

.ei-badge--teal   { background: var(--ei-teal-50);   color: var(--ei-teal-600);   }
.ei-badge--purple { background: var(--ei-purple-50);  color: var(--ei-purple-600); }
.ei-badge--amber  { background: var(--ei-amber-50);   color: var(--ei-amber-600);  }
.ei-badge--coral  { background: var(--ei-coral-50);   color: var(--ei-coral-600);  }


/* ─── Таймлайн ─── */

.ei-timeline {
  position: relative;
  padding:  8px 0 4px;
}

.ei-tl-spine {
  position:      absolute;
  left:          19px;
  top:           28px;
  bottom:        28px;
  width:         2px;
  background:    var(--ei-border);
  border-radius: 1px;
}

.ei-tl-item {
  display:     flex;
  gap:         16px;
  align-items: flex-start;
  padding:     6px 0;
}

.ei-tl-dot-wrap {
  flex-shrink:     0;
  width:           40px;
  display:         flex;
  justify-content: center;
  padding-top:     14px;
}

.ei-tl-dot {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  border:        2px solid var(--ei-bg);
  position:      relative;
  z-index:       1;
}

.ei-tl-dot--teal   { background: var(--ei-teal-100);   box-shadow: 0 0 0 2px var(--ei-teal-600);   }
.ei-tl-dot--purple { background: var(--ei-purple-100);  box-shadow: 0 0 0 2px var(--ei-purple-600); }
.ei-tl-dot--amber  { background: var(--ei-amber-100);   box-shadow: 0 0 0 2px var(--ei-amber-600);  }

.ei-tl-card {
  flex:          1;
  border:        1px solid var(--ei-border);
  border-radius: var(--ei-radius-md);
  padding:       12px 16px;
  background:    var(--ei-bg);
  transition:    box-shadow 0.15s ease;
}

.ei-tl-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.ei-tl-card--teal   { border-left: 3px solid var(--ei-teal-600);   }
.ei-tl-card--purple { border-left: 3px solid var(--ei-purple-600); }
.ei-tl-card--amber  { border-left: 3px solid var(--ei-amber-600);  }

.ei-tl-date {
  font-size:   16px;
  font-weight: 700;
  margin:      0 0 2px;
  line-height: 1.3;
}

.ei-tl-date--teal   { color: var(--ei-teal-800);   }
.ei-tl-date--purple { color: var(--ei-purple-800); }
.ei-tl-date--amber  { color: var(--ei-amber-800);  }

.ei-tl-label {
  font-size:   14px;
  font-weight: 600;
  color:       var(--ei-text);
  margin:      0 0 2px;
}

.ei-tl-sub {
  font-size: 13px;
  color:     var(--ei-text-muted);
  margin:    0;
}

/* Tighter internal spacing (override global .entry-content p margins) */
.ei-timeline .ei-tl-item     { padding: 3px 0; }
.ei-timeline .ei-tl-dot-wrap { padding-top: 9px; }
.ei-timeline .ei-tl-card     { padding: 9px 14px; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.ei-tl-card .ei-tl-date      { margin: 0; }
.ei-tl-card .ei-tl-label     { margin: 1px 0 0; }
.ei-tl-card .ei-tl-sub       { margin: 5px 0 0; }

/* Hover lift — interaction in the spirit of the table row hover (no accordions) */
.ei-tl-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}


/* ─── Схема модели 5 углов ─── */

.ei-model {
  display: grid;
  gap:     0;
}

.ei-model-top {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:                   8px;
  align-items:           stretch;
}

.ei-model-fta {
  display:         flex;
  justify-content: center;
  padding:         4px 0;
}

.ei-m-node {
  border-radius: var(--ei-radius-md);
  padding:       12px;
  text-align:    center;
  border:        1px solid var(--ei-border);
}

.ei-m-node .ei-corner-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin:         0 0 4px;
  opacity:        0.7;
}

.ei-m-node .ei-node-title {
  font-size:   13px;
  font-weight: 700;
  margin:      0 0 2px;
  line-height: 1.3;
}

.ei-m-node .ei-node-sub {
  font-size: 11px;
  margin:    0;
  opacity:   0.75;
}

.ei-m-node--blue   { background: var(--ei-blue-50);   color: var(--ei-blue-800);   border-color: var(--ei-blue-100);   }
.ei-m-node--purple { background: var(--ei-purple-50);  color: var(--ei-purple-800); border-color: var(--ei-purple-100); }
.ei-m-node--coral  { background: var(--ei-coral-50);   color: var(--ei-coral-800);  border-color: var(--ei-coral-100);  }

.ei-model-arrows {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:                   8px;
  margin:                2px 0;
}

.ei-arrow-cell {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  min-height:      36px;
}

.ei-arrow-line {
  display:     flex;
  align-items: center;
  width:       100%;
  padding:     0 12px;
}

.ei-arrow-dash {
  flex:       1;
  height:     1px;
  background: var(--ei-text-muted);
  position:   relative;
}

.ei-arrow-dash::after {
  content:           '';
  position:          absolute;
  right:             -5px;
  top:               -4px;
  border:            5px solid transparent;
  border-left-color: var(--ei-text-muted);
}

.ei-arrow-label {
  font-size:   10px;
  color:       var(--ei-text-light);
  text-align:  center;
  font-weight: 500;
}

.ei-fta-lines {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:                   8px;
}

.ei-fta-line-cell {
  display:         flex;
  justify-content: center;
}

.ei-fta-line-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
}

.ei-fta-dash-v {
  width:      1px;
  height:     32px;
  background: repeating-linear-gradient(
    to bottom,
    var(--ei-purple-600) 0,
    var(--ei-purple-600) 4px,
    transparent 4px,
    transparent 8px
  );
}

.ei-fta-dash-label {
  font-size:   10px;
  color:       var(--ei-purple-600);
  font-weight: 600;
  white-space: nowrap;
}

.ei-fta-node {
  background:    var(--ei-coral-50);
  color:         var(--ei-coral-800);
  border:        1px solid var(--ei-coral-100);
  border-radius: var(--ei-radius-md);
  padding:       10px 32px;
  text-align:    center;
}

.ei-fta-node .ei-fta-title {
  font-size:   15px;
  font-weight: 700;
  margin:      0 0 2px;
}

.ei-fta-node .ei-fta-sub {
  font-size: 12px;
  margin:    0;
  opacity:   0.75;
}

.ei-model-note {
  margin:    20px 0 0;
  font-size: 13px;
  color:     var(--ei-text-muted);
}


/* ─── Чек-лист ─── */

.ei-checklist {
  display:        flex;
  flex-direction: column;
}

.ei-cl-item {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       14px 10px;
  border-bottom: 1px solid var(--ei-border);
  border-radius: 6px;
  transition:    background 0.2s ease;
}

.ei-cl-item:last-child {
  border-bottom: none;
}

.ei-cl-item:hover {
  background: var(--ei-bg-2);
}

.ei-cl-num {
  flex-shrink:     0;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  margin-top:      1px;
}

.ei-cl-num--info { background: var(--ei-blue-50);   color: var(--ei-blue-800);   }
.ei-cl-num--ok   { background: var(--ei-teal-50);   color: var(--ei-teal-800);   }
.ei-cl-num--warn { background: var(--ei-amber-50);  color: var(--ei-amber-800);  }
.ei-cl-num--gray { background: var(--ei-gray-50);   color: var(--ei-gray-800);   }

.ei-cl-body { flex: 1; }

.ei-cl-title {
  font-size:   15px;
  font-weight: 600;
  margin:      0 0 3px;
  color:       var(--ei-text);
}

.ei-cl-sub {
  font-size:   13px;
  color:       var(--ei-text-muted);
  margin:      0;
  line-height: 1.55;
}


/* ─── Callout / Note ─── */

.ei-note {
  border-left:   3px solid var(--ei-amber-600);
  background:    var(--ei-amber-50);
  border-radius: 0 var(--ei-radius-sm) var(--ei-radius-sm) 0;
  padding:       12px 16px;
  font-size:     14px;
  color:         var(--ei-text);
  margin:        0;
}

.ei-note strong {
  color: var(--ei-amber-800);
}


/* ─── Карточки цен ─── */

.ei-price-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   12px;
}

.ei-price-card {
  border:        1px solid var(--ei-border);
  border-radius: var(--ei-radius-lg);
  padding:       16px 18px;
  background:    var(--ei-bg);
}

.ei-price-card .ei-pc-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--ei-text-light);
  margin:         0 0 6px;
}

.ei-price-card .ei-pc-name {
  font-size:   15px;
  font-weight: 700;
  color:       var(--ei-text);
  margin:      0 0 10px;
}

.ei-price-card .ei-pc-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         5px 0;
  border-bottom:   1px solid var(--ei-border);
  font-size:       13px;
}

.ei-price-card .ei-pc-row:last-child {
  border-bottom: none;
}

.ei-price-card .ei-pc-row-label {
  color: var(--ei-text-muted);
}

.ei-price-card .ei-pc-row-val {
  font-weight:  600;
  color:        var(--ei-text);
  text-align:   right;
  padding-left: 12px;
}


/* ─── Адаптив (≤600px) ─── */

@media (max-width: 600px) {
  /*
   * Превращаем обёртки в "прозрачные" контейнеры (display:contents):
   * их дети попадают прямо в сетку .ei-model и расставляются
   * вручную через grid-row, чередуя углы со стрелками.
   *
   * Порядок строк:
   *  1 C1  2 ↓invoice  3 C2  4 ↓PINT AE XML  5 C3  6 ↓invoice  7 C4
   *  8 ↓TDD (ASP пост.)  9 ↓TDD (ASP пок.)  10 FTA
   */
  .ei-model-top,
  .ei-model-arrows,
  .ei-fta-lines { display: contents; }

  /* Углы */
  .ei-model-top > .ei-m-node:nth-child(1) { grid-row: 1; }
  .ei-model-top > .ei-m-node:nth-child(2) { grid-row: 3; }
  .ei-model-top > .ei-m-node:nth-child(3) { grid-row: 5; }
  .ei-model-top > .ei-m-node:nth-child(4) { grid-row: 7; }

  /* Стрелки между углами */
  .ei-model-arrows > .ei-arrow-cell:nth-child(1) { grid-row: 2; }
  .ei-model-arrows > .ei-arrow-cell:nth-child(2) { grid-row: 4; }
  .ei-model-arrows > .ei-arrow-cell:nth-child(3) { grid-row: 6; }
  .ei-model-arrows > .ei-arrow-cell:nth-child(4) { display: none; }

  /* TDD-линии к FTA */
  .ei-fta-lines > .ei-fta-line-cell:nth-child(1) { display: none; }
  .ei-fta-lines > .ei-fta-line-cell:nth-child(2) { grid-row: 8; }
  .ei-fta-lines > .ei-fta-line-cell:nth-child(3) { grid-row: 9; }
  .ei-fta-lines > .ei-fta-line-cell:nth-child(4) { display: none; }

  .ei-model-fta { grid-row: 10; }

  /* Стрелка теперь вертикальная (вниз) */
  .ei-arrow-cell {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-height:     44px;
    padding:        4px 0;
  }
  .ei-arrow-line {
    flex-direction: column;
    align-items:    center;
    padding:        0;
    width:          auto;
    height:         28px;
  }
  .ei-arrow-dash {
    flex:   1;
    width:  1px;
    height: 100%;
  }
  .ei-arrow-dash::after {
    right:             auto;
    top:               auto;
    bottom:            -5px;
    left:              -4px;
    border:            5px solid transparent;
    border-top-color:  var(--ei-text-muted);
  }

  .ei-price-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   "Print the article" button (legacy .elementor-button markup)
   A couple of FAQ posts end with a print/download-PDF link that
   still carries Elementor's button classes. Elementor's own CSS
   isn't loaded, so style it here as a clean secondary button using
   the site tokens (outline → navy fill on hover). Also constrains
   the icon SVG, which would otherwise render at its full viewBox.
   ============================================================ */
.elementor-button-wrapper {
    margin: 24px 0 4px;
}
.elementor-button {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    background: var(--color-white, #fff);
    color: var(--color-text-primary, #1E293B);
    font-family: var(--font-heading, 'Roboto', sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--ei-border);
    border-radius: var(--button-radius, 5px);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.elementor-button:hover {
    background: var(--color-button-bg, #1E293B);
    border-color: var(--color-button-bg, #1E293B);
    color: var(--color-button-text, #fff);
    box-shadow: 0 4px 14px rgba(30, 41, 59, 0.18);
}
.elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.elementor-button-icon {
    display: inline-flex;
    align-items: center;
}
.elementor-button-icon svg {
    width: 1.05em;
    height: 1.05em;
    fill: currentColor;
    vertical-align: middle;
}