p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
input,
select,
textarea {
  font-family: "Fira Sans", sans-serif;
}
html {
  font-size: 90%; /* Зменшує базовий розмір шрифту на 20% */
}

body {
  font-family: "Fira Sans", sans-serif;
}

select {
  field-sizing: content;
}

h1.mb-4 {
  font-size: 3rem;
  text-align: center;
  font-weight: 900;
  background: linear-gradient(90deg, #1d2160, #6f45dc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

h1.mb-4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #282370, #7c54da);
}

.select2-container {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.select2-container--bootstrap-5 .select2-selection--multiple {
  width: 100%;
  white-space: normal;
}

.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__rendered {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3em 0.65em;
  vertical-align: middle;
  align-items: center;
}
.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__rendered
  .select2-selection__choice {
  display: inline-flex;
  margin: -0.2em 0 0 0;
  height: 22px;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
  display: inline;
}
.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-selection__rendered
  .select2-selection__choice:last-child {
  margin-right: 0.65em;
}
.select2-container--bootstrap-5
  .select2-selection--multiple
  .select2-search
  .select2-search__field {
  margin-top: 0em;
}
/* this ugly piece of style here allows us to hide the search bar (empty row) if we have no focus on the select, but still allow tab on it, while preserving the placeholder if no choices are selected */
.select2-container--bootstrap-5:not(.select2-container--focus)
  .select2-selection--multiple
  .select2-selection__rendered:has(.select2-selection__choice)
  + .select2-search {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.form-group {
  margin-bottom: 20px;
}

.foil-button {
  margin: 5px;
}

.foil-button.selected {
  background-color: #dc3545;
  color: white;
}

.btn-container {
  display: flex;
  flex-wrap: wrap;
}

.copy-container {
  position: relative;
}

.multi-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.multi-block {
  background: #ffffff;
  border: 1px solid #e2e6ea;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.05);
}

.multi-block h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.multi-block .multi-block-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.multi-block .multi-block-body {
  padding-top: 0.25rem;
}

.insert-block.card {
  border: 1px solid #e2e6ea;
  border-radius: 0.75rem;
  box-shadow: none;
}

.insert-block .card-header {
  background-color: rgba(13, 110, 253, 0.08);
  border-bottom: 1px solid rgba(13, 110, 253, 0.2);
}

.insert-block .card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.insert-blocks-list {
  width: 100%;
}

.results-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
}

.copy-container .copy-icon {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 1001; /* Щоб іконка була над меню */
}

.copy-container .copy-icon i {
  font-size: 18px;
  color: #000;
  transition: color 0.3s ease;
}

.copy-container .copy-icon:hover i {
  color: #007bff;
}

.copy-container:hover .copy-icon {
  display: block;
}

/* Нові стилі для випадаючого меню */
.copy-dropdown-menu {
  display: none;
  position: absolute;
  right: 10px;
  top: 40px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 200px;
}

.copy-dropdown-menu.show {
  display: block;
}

.copy-option {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.copy-option:hover {
  background-color: #f8f9fa;
}

.copy-option:first-child {
  border-radius: 4px 4px 0 0;
}

.copy-option:last-child {
  border-radius: 0 0 4px 4px;
}

.copy-option i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
}

#fileNameText {
  word-break: break-word;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

#infoMessagesText {
  margin-bottom: 0;
}

#infoMessagesText .info-message-product {
  margin-bottom: 1.35rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(15, 81, 50, 0.22);
}

#infoMessagesText .info-message-product:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#infoMessagesText .info-message-product-title {
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

#infoMessagesText .info-message-component {
  margin-bottom: 0.75rem;
}

#infoMessagesText .info-message-list > div + div {
  margin-top: 0.2rem;
}

#infoMessagesText .info-message-section {
  margin-top: 1rem;
}

#infoMessagesText .info-message-section-title {
  margin-bottom: 0.4rem;
  font-weight: 700;
}

#infoMessagesText .info-message-table {
  margin-top: 0.35rem;
  color: inherit;
  border-color: rgba(15, 81, 50, 0.18);
}

#infoMessagesText .info-message-table th,
#infoMessagesText .info-message-table td {
  padding: 0.35rem 0.5rem;
  vertical-align: top;
}

#infoMessagesText .info-message-table thead th {
  font-weight: 700;
  border-bottom-color: rgba(15, 81, 50, 0.28);
}

.alert-secondary {
  background-color: #e2e3e5;
  color: #383d41;
}

.copy-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #28a745;
  /* Зелений колір Bootstrap для успішних дій */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 1050;
  /* Вище за модальні вікна Bootstrap */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  text-align: center;
}

.copy-notification.show {
  opacity: 1;
}

/* Стилі для кнопок друку (.print-btn) із збереженням ефекту перевертання */
.print-btn {
  width: 38px;
  height: 38px;
  margin: 5px; /* або 8px, як вам потрібно */
  border-radius: 50%; /* кругла форма */
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease; /* плавне масштабування самої кнопки */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  overflow: visible; /* щоб псевдоелемент міг виступати за межі */
  /* Резервуємо 1px рамки для усіх кнопок, щоб не зсувати зовнішнє кільце
     при перемиканні варіантів із власною рамкою (як .btn-white). */
  border: 1px solid #b6b6b6;
  box-sizing: border-box;
}

/* Псевдоелемент для зовнішнього кола */
.print-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transition: transform 0.3s ease;
  transform: rotate(0deg); /* початковий стан */
}

/* При наведенні на кнопку перевертання фонового псевдоелемента на 90 градусів */
.print-btn:hover {
  transform: rotate(90deg) scale(1.3);
}

.print-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  transform: none;
}

/* Стилізація обраної кнопки (зовнішнє темне коло, як у кнопок фольги) */
.print-btn.selected {
  border: 2px solid #343a40; /* темно-сірий бордюр */
  box-shadow: none;
}

.print-btn.selected::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: 50px;
  height: 50px;
  border: 2px solid rgb(109, 109, 109);
  border-radius: 50%;
  transition: border-color 0.3s ease;
}

/* Фонові стилі для кнопок "Повнокольоровий" та "Чорно-білий" залишаються без змін */
.btn-color,
.btn-color::after {
  background: conic-gradient(
    cyan 0deg 90deg,
    magenta 90deg 180deg,
    yellow 180deg 270deg,
    black 270deg 360deg
  );
  /* Уникаємо «ореолу» по краях через прозорий бордер */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.btn-bw,
.btn-bw::after,
.btn-bw-hd,
.btn-bw-hd::after {
  background: linear-gradient(90deg, #fff 50%, #000 50%);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.btn-bw-hd {
  align-items: center;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  gap: 1px;
  justify-content: center;
  line-height: 1;
}

.btn-bw-hd .hd-letter {
  display: inline-block;
  font-weight: 700;
  line-height: 1;
}

.btn-bw-hd .hd-letter-dark {
  color: #111;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.45);
}

.btn-bw-hd .hd-letter-light {
  color: #fff;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
}

/* Біла фарба — біле коло з тонкою сірою рамкою, як інші кнопки */
.btn-white,
.btn-white::after {
  background: #ffffff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.btn-white {
  /* Малюємо тонкий контур без зміни загальної геометрії кнопки */
  border-color: #bdbdbd; /* 1px уже зарезервовано у .print-btn */
}

/* Двосторонній повнокольоровий друк: кольорові шматочки-пирога з центру кожної половини */
.btn-color-duplex,
.btn-color-duplex::after {
  /* Двосторонній повнокольоровий друк: кольорові шматочки-пирога з центру кожної половини */
  background-image: conic-gradient(
      at left center,
      cyan 0deg 90deg,
      magenta 90deg 180deg,
      yellow 180deg 270deg,
      black 270deg 360deg
    ),
    conic-gradient(
      at right center,
      cyan 0deg 90deg,
      magenta 90deg 180deg,
      yellow 180deg 270deg,
      black 270deg 360deg
    );
  background-size: 50% 100%, 50% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat;
}

/* Двосторонній чорно-білий друк: ч/б шматочки-пирога з центру кожної половини */
.btn-bw-duplex,
.btn-bw-duplex::after {
  /* Двосторонній чорно-білий друк: ч/б шматочки-пирога з центру кожної половини */
  background-image: conic-gradient(
      at left center,
      #fff 0deg 180deg,
      #000 180deg 360deg
    ),
    conic-gradient(at right center, #fff 0deg 180deg, #000 180deg 360deg);
  background-size: 50% 100%, 50% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat;
}

.lamination-button {
  transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.lamination-button.selected {
  background-color: #17a2b8; /* Приклад кольору для вибраних опцій */
  color: white;
}

.lamination-button.disabled {
  opacity: 0.5; /* Зменшуємо прозорість */
  background-color: #e0e0e0; /* Змінюємо колір фону на світло-сірий */
  cursor: not-allowed; /* Змінюємо курсор на "не дозволено" */
  transform: scale(0.95); /* Невелике зменшення розміру для ефекту */
}

#lamination-buttons-front,
#lamination-buttons-back,
#spot-varnish-buttons-front,
#spot-varnish-buttons-back {
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#spot-varnish-buttons-front,
#spot-varnish-buttons-back,
#spot-varnish-buttons-cover,
#spot-varnish-buttons-pages,
#spot-varnish-buttons-cover-staple,
#spot-varnish-buttons-cover-pur,
#spot-varnish-buttons-underlay {
  width: 100%;
  gap: 0.5rem; /* Відступ між кнопками */
}

/* Center sheet varnish buttons (front/back) */
#spot-varnish-buttons-front,
#spot-varnish-buttons-back {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

#spot-varnish-buttons-front .varnish-button,
#spot-varnish-buttons-back .varnish-button {
  flex: 0 0 calc((100% - 1rem) / 3);
  max-width: calc((100% - 1rem) / 3);
  box-sizing: border-box;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

/* Hover — м'який підсвіт, не плутати з активним станом */
.varnish-button:hover:not(.selected) {
  background-color: rgba(13, 110, 253, 0.1); /* світлий блакитний */
  color: #0d6efd; /* bootstrap primary */
  border-color: #66a3ff;
  transform: translateY(-1px);
}

/* Обраний елемент — значно контрастніший, товстіша рамка і внутрішній підсвіт */
.varnish-button.selected {
  background-color: #0d6efd; /* насичений синій */
  color: #fff; /* Білий текст */
  border-color: #0b5ed7; /* темніша рамка */
  font-weight: 600;
}

/* Фокус-контур для клавіатури, не плутати з hover */
.varnish-button:focus-visible {
  outline: 3px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

/* Контейнер для кнопок */
.btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; /* Центрування елементів */
}

/* Для груп вибору кольоровості друку — в один ряд */
.btn-container.print-group {
  flex-wrap: nowrap;
}

/* Круглі кнопки фольги */
.foil-button {
  width: 38px;
  height: 38px;
  border-radius: 50%; /* Кругла форма */
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  background-size: 100%;
  background-position: 0% 50%; /* Початкова позиція градієнта */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Ефект при наведенні */
.foil-button:hover {
  transform: scale(1.3); /* Збільшення при наведенні */
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-name: MoveBackgroundPosition;
}

/* Вибрані кнопки */
.foil-button.selected {
  border: 2px solid black;
  border-color: #343a40; /* Темно-сірий*/
  box-shadow: none;
}

/* Прозоре зовнішнє коло для всіх кнопок */
.foil-button.selected::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: 50px;
  height: 50px;
  border: 2px solid rgb(109, 109, 109);
  border-radius: 50%;
  transition: border-color 0.3s ease;
}

/* Ефекти градієнтів для різних фольг */
.foil-button.gold {
  background-image: linear-gradient(
    45deg,
    #ffd06c 15%,
    #fde292 30%,
    #ffefbf 50%,
    #ecb039 78%,
    #e0a022 95%
  );
  background-size: 550%;
  border: 2px solid #c8b315;
}
.foil-button.gold:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.silver {
  background-image: linear-gradient(
    45deg,
    #c0c0c0 0%,
    #e8e8e8 8%,
    #e8e8e8 18%,
    #ffffff 40%,
    #e8e8e8 67%,
    #dbdbdb 77%,
    #c0c0c0 100%
  );
  background-size: 550%;
  border: 2px solid #c0c0c0;
}
.foil-button.silver:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.red {
  background-image: linear-gradient(
    45deg,
    #ff0000 0%,
    #ff7070 20%,
    #ff9c9c 40%,
    #fe4a4a 60%,
    #df3535 80%,
    #c21010 100%
  );
  background-size: 550%;
  border: 2px solid #b30000;
}
.foil-button.red:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.blue {
  background-image: linear-gradient(
    45deg,
    #2e81fd 0%,
    #55aaff 20%,
    #79bbfd 40%,
    #66ccff 60%,
    #4ba5ff 80%,
    #0073e6 100%
  );
  background-size: 550%;
  border: 2px solid #0073e6;
}
.foil-button.blue:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.green {
  background-image: linear-gradient(
    45deg,
    #02c702 0%,
    #5fff5f 20%,
    #75ff75 40%,
    #48eb48 60%,
    #09c809 80%,
    #049c04 100%
  );
  background-size: 550%;
  border: 2px solid #20a702;
}
.foil-button.green:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.cyan {
  background-image: linear-gradient(
    45deg,
    #3ddce2 15%,
    #89fff3 30%,
    #c6ffff 50%,
    #5af7fa 78%,
    #17baaa 95%
  );
  background-size: 550%;
  border: 2px solid #00ced1;
}
.foil-button.cyan:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.brown {
  background-image: linear-gradient(
    45deg,
    #e1842c 0%,
    #f5b486 20%,
    #e8a168 40%,
    #e5984f 60%,
    #ce7531 80%,
    #b85a16 100%
  );
  background-size: 550%;
  border: 2px solid #c87234;
}
.foil-button.brown:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.black {
  background-image: linear-gradient(
    45deg,
    #000000 0%,
    #343434 20%,
    #808080 40%,
    #4f4f4f 60%,
    #292929 80%,
    #000000 100%
  );
  background-size: 550%;
  border: 2px solid #1f1f1f;
}
.foil-button.black:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.matte-gold {
  background-image: linear-gradient(
    45deg,
    #caa32e 0%,
    #be8c3c 8%,
    #d3b15f 27%,
    #e8e0a0 35%,
    #e0d8b2 50%,
    #b17b32 77%,
    #a4692a 100%
  );
  background-size: 550%;
  border: 2px solid #b8860b;
}
.foil-button.matte-gold:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.platinum {
  background-image: linear-gradient(
    45deg,
    #c5c5c5 0%,
    #dcdcdc 20%,
    #c6c6c6 40%,
    #bfbfbf 60%,
    #f0f0f0 80%,
    #e5e4e2 100%
  );
  background-size: 550%;
  border: 2px solid #c4c4c4;
}
.foil-button.platinum:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}
.foil-button.holographic {
  background-image: url(bg.jpg);
  border: 2px solid #078f84;
  background-size: 6000%;
}
.foil-button.magenta {
  background-image: linear-gradient(
    45deg,
    #ff00ff 0%,
    #ff66ff 20%,
    #ff99ff 40%,
    #ff40ff 60%,
    #cc00cc 80%,
    #990099 100%
  );
  background-size: 550%;
  border: 2px solid #cc00cc;
}
.foil-button.magenta:hover {
  animation: MoveBackgroundPosition 1s ease-in-out infinite;
}

@keyframes MoveBackgroundPosition {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes fluid {
  from {
    background-position: top;
  }

  to {
    background-position: bottom;
  }
}

.tooltip {
  font-size: 12px;
  background-color: #333; /* Тло */
  color: #fff; /* Текст */
  border-radius: 20%;
  margin-bottom: -40px;
}

.tooltip .tooltip-arrow {
  border-color: #333; /* Колір стрілки */
}

.tooltip-html .tooltip-inner {
  white-space: nowrap;
  max-width: none;
  padding: 8px 12px;
}

/* Стилізація колонок для «Лице» та «Зворот» (перша і друга колонки) */
.data-general,
.data-front,
.data-back,
.data-underlay,
.data-inserts,
.data-forzac,
.data-info,
.criticalErrors {
  position: relative;
  padding: 36px 15px 10px;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-top: 15px;
}

/* Стилізація колонок для «Лице» та «Зворот» (перша і друга колонки) */
.data-general,
.data-front,
.data-back,
.data-underlay,
.data-inserts,
.data-forzac {
  background-color: #f8f8f8; /* Світло-сірий фон */
  border: 1px solid #a7a7a7; /* Легка рамка */
}

.data-info {
  background-color: #d7e7ff; /* Світло-сірий фон */
  border: 1px solid #899ab4; /* Легка рамка */
}

.criticalErrors {
  background-color: #ffb2b2;
  border: 1px solid #a31a1a;
}

/* Стилізація всього ряду */
.front-back-row {
  display: flex;
  min-height: 100%;
}

/* Стилізація колонок */
.front-back-row .col-md-4 {
  display: flex;
  flex-direction: column;
}

.front-back-row .col-md-4 h3 {
  font-size: 1.75rem;
  font-weight: bolder;
  margin: 0;
}

.front-back-row--stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0px;
}

.front-back-row--stacked .col-md-4 {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}

.binding-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.binding-type-buttons .btn {
  min-width: 110px;
  flex: 0 0 auto;
}

.compact-row {
  --bs-gutter-y: 0.5rem;
  margin-bottom: 0.5rem;
}

.compact-row .action-label,
.binding-options .action-label {
  margin: 8px 0;
}

.compact-row .form-control,
.compact-row .form-select {
  min-height: 36px;
}

.binding-options {
  margin-top: 12px;
}

.binding-options .form-label {
  margin-bottom: 6px;
}

/* Avoid vertical misalignment of spring/pur selectors vs. format/orientation */
.general-binding-options .binding-options {
  margin-top: 0;
}

.general-book-columns {
  --bs-gutter-y: 0.5rem;
}

.general-book-column {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.general-book-dimensions .col-6,
.general-book-orientation .col-6 {
  display: flex;
  flex-direction: column;
}

.general-binding-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.general-binding-options .binding-options {
  margin-top: 0;
}
.general-binding-options .binding-options .action-label {
  margin: 15px 0;
}

/* Стилізація блоків даних всередині колонок */
.data-general,
.data-front,
.data-back,
.data-inserts,
.data-forzac {
  flex: 1; /* Це змусить блоки розтягнутися на всю доступну висоту */
  display: flex;
  flex-direction: column;
}

.data-underlay {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.data-inserts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.data-forzac {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.data-underlay.collapsed {
  padding-bottom: 12px;
}

.data-underlay.collapsed fieldset {
  display: none;
}

/* Стилізація заголовків у колонках як табів */
.data-general h4,
.data-front h4,
.data-back h4,
.data-underlay h4,
.data-inserts h4,
.data-forzac h4,
.data-info h4,
.criticalErrors h4 {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  /* min-width: 100px; */
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background-color: #a7a7a7; /* колір обводки блоку */
  border-radius: 0 0 5px 0;
  padding: 7px 18px 6px 18px;
  margin: 0;
  z-index: 2;
  box-shadow: none;
}

/* Окремі стилі для info і помилок */
.data-info h4 {
  background-color: #899ab4 !important;
  color: #fff;
}
.criticalErrors h4 {
  background-color: #ba3131 !important;
  color: #fff;
}

.data-underlay.underlay-locked {
  opacity: 0.6;
}

.data-underlay fieldset[disabled] {
  pointer-events: none;
}

.data-underlay fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.insert-block {
  border: 1px solid #dfe3ec;
  border-radius: 6px;
  background-color: #fff;
}

.inline-select {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.data-forzac .inline-select {
  flex-wrap: nowrap;
}

.data-forzac .inline-select .form-select,
.data-forzac .inline-select select,
.data-forzac .inline-select .select2-container {
  min-width: 0;
}

.inline-select .form-label.action-label {
  margin: 0;
  min-width: 150px;
}

.inline-select .form-select,
.inline-select select {
  flex: 1;
  min-width: 200px;
}

.inline-select .select2-container {
  display: flex;
  flex: 1;
  min-width: 200px;
  width: auto !important;
}

.cover-disabled {
  opacity: 0.6;
}

.cover-dependent-hidden {
  display: none !important;
}

.cover-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cover-grid {
  display: grid;
  gap: 0.75rem 1rem;
}

.cover-grid-primary {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "material lamination"
    "print-front print-back";
}

.cover-grid-item {
  min-width: 0;
}

.cover-grid-item--material {
  grid-area: material;
}

.cover-grid-item--lamination {
  grid-area: lamination;
}

.cover-grid-item--print-front {
  grid-area: print-front;
}

.cover-grid-item--print-back {
  grid-area: print-back;
}

.cover-grid .print-group {
  min-height: 54px;
  align-items: center;
}

@media (max-width: 767.98px) {
  .cover-grid-primary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "material"
      "lamination"
      "print-front"
      "print-back";
  }
}

/* Стилізація для підписів дій */
.action-label {
  position: relative;
  display: block; /* Елемент займає всю ширину */
  text-align: left;
  margin: 15px 0; /* Відступи зверху і знизу від блоку */
  padding-left: 10px; /* Відступ зліва від тексту */
  border-radius: 2px; /* Легка заокругленість самого контейнера */
  font-size: 0.75rem;
  color: #b4b4b4;
}

/* Псевдоелемент, що створює горизонтальну лінію на всю ширину */
.action-label::before {
  content: "";
  position: absolute;
  top: 50%; /* Лінія по центру по висоті */
  left: 0;
  width: 100%;
  border-bottom: 1px solid #ccc; /* Лінія у сірому кольорі */
  z-index: 1; /* Лінія під текстом */
}

/* Обгортка для тексту, щоб фон перекривав лінію, з доданою обводкою та закругленням */
.action-label span {
  position: relative;
  background-color: #fff; /* Фон, який відповідає кольору сторінки */
  padding: 4px 10px; /* Відступи навколо тексту */
  z-index: 2; /* Текст завжди поверх лінії */
  border: 1px solid #ccc; /* Обводка в тому ж кольорі, що й лінія */
  border-radius: 8px; /* Закруглення країв */
}

.select-wrapper {
  position: relative;
}

.red-indicator {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50% !important;
  display: block;
  z-index: 50;
  pointer-events: auto;
  box-sizing: border-box;
  border: 2px solid red;
}

/* Keep discount input-groups visually unified even with dynamic indicators */
.discount-group {
  flex-wrap: nowrap;
}

.discount-group > .form-control,
.discount-group > .form-select {
  border-radius: 0 !important;
}

.discount-group > :first-child {
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

/* The last field can be followed by injected markers; pin rounding to the actual last select */
.discount-group > #discountApplyTo,
.discount-group > #discountApplyTo_multi {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

.price-adjustment-group {
  flex-wrap: nowrap;
}

.price-adjustment-group .form-control {
  min-width: 0;
}

.price-adjustment-group .price-mode-select {
  flex: 0 0 54px;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  padding-left: 12px;
  padding-right: 24px;
  text-align: center;
}

.red-count-indicator {
  background-color: red;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 7px 1px 7px;
  margin-left: 8px;
  font-size: 0.8em;
  display: inline-block;
  position: relative;
  top: -1px;
}

.side-options-count-indicator {
  vertical-align: middle;
  cursor: pointer;
}

.action-label.has-selected-option::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

#technicalTaskText {
  display: block;
  padding-top: 0; /* вирівнюємо відступ з іншими колонками */
  margin-bottom: 0;
  /* white-space: pre-wrap; */
}

#technicalTaskText p {
  margin: 0 0 0.75rem;
}

#technicalTaskText p:last-child {
  margin-bottom: 0;
}

#technicalTaskText span {
  display: block;
  text-align: left; /* для вирівнювання тексту по центру */
  padding: 10px; /* додатковий відступ для візуальної привабливості */
}

#technicalTaskText h5 {
  /* font-weight: bold; */
  font-size: 1.4rem;
  /* margin-bottom: -0.8rem; */
  /* padding: 1.5rem 0; */
}

/* На мобільних пристроях кожен елемент буде займати 100% ширини */
@media (max-width: 768px) {
  #technicalTaskText span {
    flex: 0 0 100%;
  }
}

/* Рендеримо ТЗ з перенесеннями рядків */
#productionTechnicalTaskText {
  white-space: pre-wrap;
  margin: 0;
}

.nav-tabs .nav-link {
  color: #495057;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.nav-tabs .nav-link.active {
  color: #007bff;
  background-color: #fff;
  border-bottom-color: transparent;
}

.tab-content {
  padding: 20px;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
}

/* Деталізований розрахунок: у футері лишаємо лише верхній бордер */
.table tfoot td,
.table tfoot th {
  border: 0 !important; /* прибираємо рамку по колу */
}
.table tfoot tr:first-child td,
.table tfoot tr:first-child th {
  border-top: 2px solid #212529 !important; /* залишається тільки верхній бордер */
}

#priceCalculationDetailsText .table.table-sm > :not(caption) > * > * {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

#priceCalculationDetailsText .table.table-sm > :not(caption) > * > :first-child {
  padding-left: 1rem;
}

#priceCalculationDetailsText .table.table-sm > :not(caption) > * > :last-child {
  padding-right: 1rem;
}

/* Головний контейнер табів */
#mainTabsContent {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin-top: -16px; /* опускаємо контейнер так, щоб рамка була по центру табів */
}

/* Навігація основного рівня */
#mainTabs {
  display: flex;
  justify-content: center; /* вирівнювання табів по центру */
  margin-bottom: -16px; /* піднімаємо таби, щоб їх нижній край заходив у рамку */
}

/* Зробити фон неактивних табів суцільним, щоб не просвічувались лінії ззаду */
#mainTabs .nav-link {
  background-color: #fff; /* прибирає прозорість */
  border: 1px solid #dee2e6;
  color: #0d6efd;
}
#mainTabs .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}
#mainTabs .nav-link + .nav-link {
  margin-left: 8px;
}
#mainTabs {
  position: relative;
  z-index: 2;
}

.primary-switches {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.primary-switches .row > [class*="col"] {
  display: flex;
}

.primary-switches .row > [class*="col"] > .primary-option-card {
  flex: 1 1 auto;
}

@media (min-width: 768px) {
  .front-back-row--stacked .primary-switches--inline .row > [class*="col"] {
    width: auto;
    max-width: none;
  }

  .front-back-row--stacked .primary-switches--inline .row > .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}

.primary-option-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 0 0.65rem 0;
  height: 100%;
}

.primary-option-card b {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background-color: #a7a7a7;
  border-radius: 5px;
  padding: 7px 18px 6px 18px;
  margin: 0;
  z-index: 2;
  box-shadow: none;
  display: inline-block;
  align-self: flex-start;
}

.primary-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.primary-option-title {
  font-weight: 600;
  color: #212529;
}

.primary-option-subtitle {
  font-size: 0.85rem;
  color: #6c757d;
}

.primary-option-buttons {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  flex-wrap: wrap;
}

.primary-option-buttons .btn {
  flex: 1 1 0;
  font-weight: 600;
}

.primary-option-buttons .btn.active {
  color: #fff;
}

.order-draft-pre {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #f8f9fa;
  font-size: 0.8rem;
}

.order-draft-description {
  max-height: 220px;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
}

.order-draft-customer-summary {
  max-width: 980px;
}

.order-draft-customer-summary-body {
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
}

.order-draft-customer-summary-body p {
  margin: 0 0 0.45rem;
}

.order-draft-customer-summary-body p:last-child {
  margin-bottom: 0;
}

.internal-cost-details {
  border-color: var(--bs-warning);
  border-radius: var(--bs-card-border-radius);
  overflow: hidden;
}

.internal-cost-details > summary {
  align-items: center;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(var(--bs-card-border-radius) - 1px);
  border-top-right-radius: calc(var(--bs-card-border-radius) - 1px);
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  list-style: none;
}

.internal-cost-details:not([open]) > summary {
  border-bottom: 0;
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

.internal-cost-details > summary::-webkit-details-marker {
  display: none;
}

.internal-cost-details > .card-body {
  background: #fff;
  overflow-x: auto;
}

.internal-cost-details .table {
  min-width: 760px;
}

.internal-cost-details .table > :last-child > tr:last-child > * {
  border-bottom-width: 0;
}

.internal-cost-title {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.45rem;
}

.internal-cost-caret {
  border-bottom: 0.35rem solid transparent;
  border-left: 0.5rem solid currentColor;
  border-top: 0.35rem solid transparent;
  display: inline-block;
  height: 0;
  transition: transform 0.15s ease;
  width: 0;
}

.internal-cost-details[open] .internal-cost-caret {
  transform: rotate(90deg);
}

.internal-cost-totals {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  font-size: 0.92rem;
  gap: 0.25rem 1rem;
  justify-content: flex-end;
  min-width: 220px;
}

.internal-cost-metric {
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .internal-cost-details > summary {
    align-items: flex-start;
  }

  .internal-cost-title,
  .internal-cost-totals {
    flex: 1 1 100%;
  }

  .internal-cost-totals {
    justify-content: flex-start;
    min-width: 0;
  }
}
/* Sheet product templates */
.sheet-template-panel {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #f8f9fa;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.sheet-template-header {
  cursor: pointer;
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

#sheetTemplateCollapse,
#multiPageTemplateCollapse {
  padding-top: 12px;
}

.sheet-template-panel .form-label {
  margin-bottom: 4px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #495057;
}

.sheet-template-panel .form-select,
.sheet-template-panel .form-control,
.sheet-template-panel .btn {
  min-height: 34px;
}

.sheet-template-actions {
  display: grid;
  grid-template-columns: 34px 34px 34px;
  align-items: center;
  gap: 6px;
}

.sheet-template-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  padding-left: 0;
  padding-right: 0;
}

.sheet-template-name-input {
  font-weight: 600;
}

.sheet-template-message {
  margin-top: 10px;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .sheet-template-actions {
    justify-content: start;
  }
}