/* Мокапи продукту на головній.
   Текст зверстаний у HTML поверх зображень без тексту, тож перекладається разом зі сторінкою.
   Розміри задаються в пікселях оригінального макета: --u — один такий піксель,
   він масштабується з шириною блоку через контейнерні одиниці (cqw). */

.mockup {
  --dw: 1200;
  --dh: 720;
  --u: calc(100cqw / var(--dw));
  --mockup-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  container-type: inline-size;
  font-family: var(--mockup-font);
  letter-spacing: 0;
  line-height: 1.4;
}

/* Слайд прев'ю — flex-контейнер, і рядок у ньому брав ширину з вмісту. Контейнер мокапа
   (container-type) вмісту не має, тому рядок розтягуємо на всю ширину слайда явно. */
.slider-preview .slider-item > .row {
  flex: 1 1 auto;
  min-width: 0;
}

.mockup > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Шар у координатах макета: --x, --y — лівий верхній кут, --w — ширина, --fs — розмір шрифту */
.mockup-at {
  position: absolute;
  left: calc(var(--x) / var(--dw) * 100%);
  top: calc(var(--y) / var(--dh) * 100%);
  width: calc(var(--w) / var(--dw) * 100%);
  margin: 0;
  font-size: calc(var(--fs, 16) * var(--u));
  color: #424242;
  text-wrap: balance;
}

.mockup-center {
  text-align: center;
}

.mockup-bold {
  font-weight: 700;
  line-height: 1.2;
}

.mockup-semibold {
  font-weight: 600;
}

.mockup-muted {
  color: #bcbcbc;
}

.mockup-white {
  color: #fff;
}

.mockup-note {
  line-height: 1.3;
  color: #515151;
}

.mockup-gray {
  color: #8e8e93;
}

.mockup-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mockup-divider {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0;
}

.mockup-divider::before,
.mockup-divider::after {
  content: '';
  flex: 1 1 1em;
  height: 1px;
  background: rgba(0, 0, 0, .12);
}

.mockup-icons {
  display: flex;
  justify-content: center;
  gap: calc(var(--gap, 26) * var(--u));
}

.mockup-icons img {
  width: calc(var(--size, 56) * var(--u));
  height: auto;
}

/* Віджет */

.mockup-widget {
  padding: calc(46 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #fff;
  box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .16);
  text-align: center;
}

.mockup-widget-emoji {
  margin-bottom: calc(40 * var(--u));
  font-size: calc(118 * var(--u));
  line-height: 1;
}

.mockup-widget-text {
  margin: 0 0 calc(22 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 500;
  line-height: 1.42;
}

.mockup-widget .mockup-divider {
  margin-bottom: calc(24 * var(--u));
  font-size: calc(15 * var(--u));
  color: #515151;
}

.mockup-widget-close {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .25);
}

.mockup-widget-close::before,
.mockup-widget-close::after {
  content: '';
  position: absolute;
  top: calc(50% - 1 * var(--u));
  left: 30%;
  right: 30%;
  height: calc(2.5 * var(--u));
  background: #333;
  transform: rotate(45deg);
}

.mockup-widget-close::after {
  transform: rotate(-45deg);
}

/* Поп-ап: ширина вікна — 33% екрана, тобто 360 px макета */

.mockup-popup {
  --u: calc(33cqw / 360);
  overflow: hidden;
  padding-bottom: calc(30 * var(--u));
  background: #fff;
  text-align: center;
  line-height: 1.4;
}

.mockup-popup > img {
  display: block;
  width: 100%;
}

.mockup-popup-text {
  margin: calc(24 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.45;
  color: #111;
}

.mockup-popup .mockup-divider {
  margin-bottom: calc(22 * var(--u));
  font-size: calc(12 * var(--u));
  color: #868686;
}

.mockup-popup .mockup-icons {
  --size: 46;
  --gap: 17;
}

/* Телефон у «Автоматизації»: перший слайд — чат, обрізаний зверху, як прокручена переписка */
.mockup-chat-clip {
  min-height: 0;
  overflow: hidden;
}

/* CRM «Всі запити в одному вікні»: два знімки 1324×1100 і 578×1100 */

/* Розмір шрифту — на дочірніх блоках: на самому контейнері cqw рахувався б від вікна */
.crm {
  --u: calc(100cqw / 1902);
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
}

.crm-chats,
.crm-card {
  font-size: calc(21 * var(--u));
}

.crm i {
  font-style: normal;
}

.crm-chats {
  display: grid;
  grid-template-columns: calc(497 * var(--u)) 1fr;
  width: calc(1324 * var(--u));
  height: calc(1100 * var(--u));
  overflow: hidden;
  background: #fff;
}

.crm-list {
  border-right: 1px solid #e6e6e6;
}

.crm-title {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(80 * var(--u));
  padding: 0 calc(25 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
}

.crm-title-icon {
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #111;
  color: #fff;
  font-size: calc(18 * var(--u));
}

.crm-tabs {
  display: flex;
  align-items: stretch;
  height: calc(47 * var(--u));
  background: #e6e6e6;
  font-size: calc(19 * var(--u));
  color: #555;
}

.crm-tabs span {
  display: grid;
  place-items: center;
  padding: 0 calc(26 * var(--u));
}

.crm-tabs .is-active {
  background: #333;
  color: #fff;
}

.crm-tabs .crm-search {
  margin-left: auto;
  padding: 0 calc(16 * var(--u));
  border-left: 1px solid #c8c8c8;
  font-size: calc(24 * var(--u));
}

.crm-item {
  display: grid;
  grid-template-columns: calc(66 * var(--u)) 1fr auto;
  align-items: center;
  column-gap: calc(14 * var(--u));
  height: calc(116 * var(--u));
  margin: 0 calc(8 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(25 * var(--u));
  border-bottom: 1px solid #eee;
}

.crm-item.is-active {
  grid-template-columns: calc(117 * var(--u)) 1fr auto;
  margin-top: calc(8 * var(--u));
  padding-left: 0;
  border-radius: calc(8 * var(--u));
  overflow: hidden;
  background: #3e3d8b;
  color: #fff;
}

.crm-item.is-warm {
  margin: 0;
  padding-left: calc(33 * var(--u));
  background: #fef5f0;
}

.crm-avatar {
  width: calc(66 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.crm-item.is-active .crm-avatar {
  width: 100%;
  height: calc(116 * var(--u));
  border-radius: 0;
}

.crm-who {
  min-width: 0;
}

.crm-name {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(23 * var(--u));
  white-space: nowrap;
}

.crm-name img {
  width: calc(20 * var(--u));
}

.crm-preview {
  display: block;
  margin-top: calc(6 * var(--u));
  overflow: hidden;
  font-size: calc(17 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #9a9a9a;
}

.crm-item.is-active .crm-preview {
  color: #b9b8e6;
}

.crm-meta {
  display: grid;
  justify-items: end;
  gap: calc(14 * var(--u));
  font-size: calc(16 * var(--u));
  color: #9a9a9a;
}

.crm-item.is-active .crm-meta {
  color: #b9b8e6;
}

.crm-badges {
  display: flex;
}

.crm-badge {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: calc(21 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.crm-badge + .crm-badge {
  margin-left: calc(-10 * var(--u));
  border: calc(2 * var(--u)) solid #000;
  background: #fff;
  color: #000;
}

.crm-dialog {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #e8f2fd;
}

.crm-dialog-head {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  height: calc(80 * var(--u));
  padding: 0 calc(50 * var(--u));
  background: #e1eef6;
}

.crm-dialog-name {
  flex: 1;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  color: #8a959c;
}

.crm-done {
  padding: calc(9 * var(--u)) calc(20 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #2aa741;
  color: #fff;
  font-size: calc(20 * var(--u));
}

.crm-owner {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  border: 1px solid #d3dde3;
  border-radius: calc(26 * var(--u));
  line-height: 1.1;
}

.crm-owner small {
  display: block;
  font-size: calc(11 * var(--u));
  letter-spacing: .12em;
  text-transform: uppercase;
}

.crm-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(12 * var(--u));
  min-height: 0;
  overflow: hidden;
  padding: calc(8 * var(--u)) calc(50 * var(--u)) calc(26 * var(--u));
}

.crm-msg {
  position: relative;
  max-width: calc(540 * var(--u));
  padding: calc(11 * var(--u)) calc(18 * var(--u));
  border-radius: calc(26 * var(--u));
  background: #fff;
  margin-left: calc(34 * var(--u));
}

.crm-msg::before {
  content: '';
  position: absolute;
  left: calc(-36 * var(--u));
  bottom: 0;
  width: calc(26 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: url(../images/mockups/people/vitaly-vf.webp) center / cover;
}

.crm-msg.is-out {
  align-self: flex-end;
  margin: 0 calc(34 * var(--u)) 0 0;
  background: #3e3d8b;
  color: #fff;
}

.crm-msg.is-out::before {
  content: 'К';
  left: auto;
  right: calc(-36 * var(--u));
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  font-size: calc(13 * var(--u));
  font-weight: 700;
}

.crm-msg a {
  border-bottom: 1px solid currentColor;
  color: inherit;
}

.crm-note {
  align-self: center;
  font-size: calc(16 * var(--u));
  color: #8a959c;
}

.crm-composer {
  margin: 0 calc(50 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(30, 60, 90, .12);
}

.crm-composer-tabs {
  display: flex;
  gap: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(24 * var(--u)) 0;
  border-bottom: 1px solid #eee;
  font-size: calc(17 * var(--u));
  color: #aaa;
}

.crm-composer-tabs span {
  padding-bottom: calc(10 * var(--u));
}

.crm-composer-tabs .is-active {
  border-bottom: calc(2 * var(--u)) solid #000;
  color: #000;
  font-weight: 600;
}

.crm-composer-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(26 * var(--u)) calc(24 * var(--u));
  color: #888;
}

.crm-composer-input i {
  font-size: calc(32 * var(--u));
  color: #3f7fe0;
}

.crm-tools {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding: calc(16 * var(--u)) calc(74 * var(--u)) calc(22 * var(--u));
  font-size: calc(28 * var(--u));
  color: #666;
}

.crm-tools small {
  margin-left: auto;
  font-size: calc(17 * var(--u));
  color: #8a959c;
}

.crm-card {
  position: relative;
  width: calc(578 * var(--u));
  height: calc(1100 * var(--u));
  overflow: hidden;
  padding: calc(46 * var(--u)) calc(54 * var(--u)) 0;
  background: #fff;
}

.crm-card-name {
  margin: 0 0 calc(30 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
}

.crm-card-photo {
  position: absolute;
  top: calc(24 * var(--u));
  right: calc(20 * var(--u));
  width: calc(186 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .15);
}

.crm-status {
  display: inline-block;
  min-width: calc(330 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border: calc(3 * var(--u)) solid #7b3fa0;
  border-radius: calc(12 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 700;
}

.crm-card-tabs {
  display: flex;
  gap: calc(24 * var(--u));
  margin: calc(34 * var(--u)) calc(-54 * var(--u)) calc(40 * var(--u));
  padding: 0 calc(54 * var(--u));
  border-bottom: 1px solid #e6e6e6;
  color: #9a9a9a;
}

.crm-card-tabs span {
  padding-bottom: calc(14 * var(--u));
}

.crm-card-tabs .is-active {
  border-bottom: calc(3 * var(--u)) solid #000;
  color: #000;
}

.crm-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8 * var(--u));
}

.crm-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: calc(26 * var(--u));
  background: #efefef;
}

.crm-tag i,
.crm-sub i {
  font-size: calc(18 * var(--u));
}

.crm-add {
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  aspect-ratio: 1;
  border: 1px dashed #999;
  border-radius: 50%;
}

.crm-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(40 * var(--u)) 0 calc(12 * var(--u));
  font-size: calc(17 * var(--u));
  color: #777;
}

.crm-section i {
  font-size: calc(24 * var(--u));
  color: #000;
}

.crm-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(6 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #efefef;
}

.crm-fields {
  display: grid;
  grid-template-columns: calc(130 * var(--u)) 1fr;
  margin-top: calc(30 * var(--u));
}

.crm-fields dt,
.crm-fields dd {
  margin: 0;
  padding: calc(18 * var(--u)) 0;
  border-bottom: 1px solid #e6e6e6;
}

.crm-fields dt {
  font-size: calc(17 * var(--u));
  color: #8a8a8a;
}

.crm-card-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(18 * var(--u)) calc(54 * var(--u)) calc(18 * var(--u));
  border-top: 1px solid #e6e6e6;
  background: #fff;
}

.crm-save {
  display: inline-block;
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #28a845;
  color: #fff;
}

/* Розсилка: панель фільтрів і редактор повідомлення 416×632, телефон 850×1100 */

/* Контейнер — обгортка .sender-preview, щоб розмір шрифту панелі рахувався від її ширини */
.sender-preview-1,
.sender-preview-2 {
  container-type: inline-size;
}

.mockup-panel {
  --u: calc(100cqw / 416);
  position: relative;
  aspect-ratio: 416 / 632;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(15 * var(--u));
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
}

.mockup-panel i {
  font-style: normal;
}

.mockup-filters {
  padding: calc(12 * var(--u)) calc(12 * var(--u)) 0;
  background: #eceef4;
}

.mockup-filters-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(8 * var(--u));
  font-weight: 700;
}

.mockup-filters-head i {
  font-size: calc(22 * var(--u));
  font-weight: 400;
  color: #555;
}

.mockup-filter-row {
  display: grid;
  grid-template-columns: calc(84 * var(--u)) 1fr auto;
  align-items: center;
  min-height: calc(42 * var(--u));
  border-bottom: 1px solid #d8dbe3;
  font-size: calc(13 * var(--u));
}

.mockup-filter-row > i {
  color: #999;
}

.mockup-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4 * var(--u));
}

.mockup-chips img {
  width: calc(26 * var(--u));
}

.mockup-chips small {
  margin-right: calc(4 * var(--u));
  color: #888;
}

.mockup-chip {
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  color: #fff;
  font-size: calc(14 * var(--u));
}

.mockup-chip.is-client {
  background: #26b49a;
}

.mockup-chip.is-regular {
  background: #8a3fb0;
}

.mockup-placeholder {
  font-style: italic;
  color: #888;
}

.mockup-filters-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(12 * var(--u)) 0 calc(14 * var(--u));
  color: #3f7fe0;
}

.mockup-apply {
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #3f7fe0;
  color: #fff;
}

.mockup-people {
  display: grid;
  gap: calc(4 * var(--u));
  margin: 0 calc(-2 * var(--u));
}

.mockup-person {
  display: grid;
  grid-template-columns: calc(24 * var(--u)) calc(44 * var(--u)) 1fr auto;
  align-items: center;
  column-gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #fff;
}

.mockup-person.is-all {
  grid-template-columns: calc(24 * var(--u)) 1fr;
}

.mockup-check {
  width: calc(18 * var(--u));
  aspect-ratio: 1;
  border-radius: calc(3 * var(--u));
  background: #3f7fe0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.mockup-person img {
  width: calc(44 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.mockup-person small {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  color: #888;
}

.mockup-person small img {
  width: calc(13 * var(--u));
}

.mockup-person .mockup-chip {
  align-self: start;
  padding: calc(1 * var(--u)) calc(5 * var(--u));
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
}

.mockup-message {
  display: flex;
  flex-direction: column;
  padding: calc(11 * var(--u));
  background: #dfe3ee;
}

.mockup-message-photo {
  display: block;
  width: 100%;
  border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0;
}

.mockup-message-actions {
  display: flex;
  justify-content: space-between;
  padding: calc(16 * var(--u)) calc(30 * var(--u));
  border-radius: 0 0 calc(8 * var(--u)) calc(8 * var(--u));
  background: #fff;
  color: #3f7fe0;
}

.mockup-message-actions span:last-child {
  color: #e35d4f;
}

.mockup-message-text {
  margin: calc(14 * var(--u)) 0 0;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid #c9ced8;
  border-radius: calc(4 * var(--u));
  background: #fff;
  font-size: calc(14 * var(--u));
  line-height: 1.4;
}

.mockup-message-hint {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(11 * var(--u));
  text-align: center;
  color: #999;
}

.sender-phone-shot {
  --dw: 850;
  --dh: 1100;
}

.mockup-bubble {
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #ececec;
  color: #000;
  line-height: 1.35;
  text-wrap: pretty;
}