* {
  box-sizing: border-box;
  /* border: 1px solid red !important; */
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* убираем горизонтальный скролл */
  direction: rtl;
  width: 100%;
  /* height: 100%; */
}

.my-form-wrapper {
  width: 100%;
  padding: 20px 20px 120px;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;

  @media (min-width: 1440px) {
    padding: 60px 291px 134px 181px;
  }
}

/* .order-desktop { */
/* background-color: #ffffff;
  display: grid;
  justify-items: center;
  align-items: start;
  width: 50vw; */
/* } */

.order-desktop .div {
  /* background-color: #ffffff; */
  /* width: 1440px; */
  width: 100%;
  /* height: 3942px; */
  position: relative;
}

.order-desktop .text-wrapper {
  /* position: absolute;
  top: 333px;
  left: 825px; */
  font-family: "Roboto-Bold", Helvetica;
  font-weight: 700;
  color: #4a4b4b;
  /* font-size: 36px;*/
  font-size: 20px;
  /* letter-spacing: 0; */
  line-height: normal;
  /* white-space: nowrap; */
  /* direction: rtl; */
  margin-bottom: 8px;

  @media (min-width: 1440px) {
    font-size: 36px;
    margin-bottom: 20px;
  }
}

.order-desktop .p {
  /* position: absolute;
  width: 968px;
  top: 395px;
  left: 181px; */
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  color: #4a4b4b;
  font-size: 16px;
  /* letter-spacing: 0; */
  line-height: normal;
  /* direction: rtl; */
  margin-bottom: 30px;

  @media (min-width: 1440px) {
    font-size: 20px;
    margin-bottom: 40px;
  }
}

.order-desktop .element {
  /* position: absolute; */
  /* width: 1440px; */
  width: 100%;
  max-width: 1440px;
  height: 550px;
  top: 3392px;
  left: 0;
  object-fit: cover;
}

.order-desktop .image {
  /* position: absolute; */
  /* width: 219px; */
  width: 100%;
  max-width: 219px;
  height: 126px;
  top: 60px;
  left: 930px;
  aspect-ratio: 1.74;
  object-fit: cover;
}

.order-desktop .view {
  display: flex;
  flex-direction: column;
  /* width: 524px; */
  /* align-items: flex-end; */
  gap: 8px;
  /* position: absolute; */
  /* top: 479px; */
  /* left: 625px; */
  margin-bottom: 20px;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .frame {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  /* align-items: flex-start; */
  /* flex: 0 0 auto; */
  gap: 4px;
  /* position: relative; */
}

.order-desktop .text-wrapper-2 {
  /* position: relative; */
  /* width: fit-content; */
  /* margin-top: -1px; */
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  color: #4a4b4b;
  font-size: 16px;
  /* text-align: right; */
  /* letter-spacing: 0; */
  line-height: normal;
  /* white-space: nowrap; */

  @media (min-width: 1440px) {
    font-size: 20px;
  }
}

.order-desktop .text-wrapper-3 {
  /* position: relative; */
  width: fit-content;
  /* margin-top: -1px; */
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  color: #4a4b4b;
  font-size: 18px;
  /* direction: rtl; */
  /* letter-spacing: 0; */
  line-height: normal;
  /* white-space: nowrap; */

  @media (min-width: 1440px) {
    font-size: 24px;
  }
}

.order-desktop .view-2 {
  /* width: 524px; */
  /* align-items: flex-end; */
  gap: 8px;
  /* position: absolute; */
  /* top: 2709px; */
  /* left: 625px; */
  display: flex;
  flex-direction: column;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

/* .order-desktop .frame-2 { */
/* position: relative; */
/* margin-top: 1px; двигаем вниз */
/* margin-right: -425px; двигаем вправо */
/* text-align: right; выравнивание по правому краю */
/* } */

.order-desktop .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  color: #4a4b4b;
  font-size: 16px;
  direction: rtl;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;

  @media (min-width: 1440px) {
    font-size: 20px;
  }
}

.order-desktop .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  color: #4a4b4b;
  font-size: 14px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;

  @media (min-width: 1440px) {
    font-size: 18px;
  }
}

.order-desktop .overlap {
  /* position: absolute; */
  /* width: 524px; */
  width: 100%;
  max-width: 524px;
  /* height: 192px; */
  top: 2996px;
  left: 625px;
}

.order-desktop .view-3 {
  /* width: 524px; */
  /* align-items: flex-end; */
  gap: 8px;
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  display: flex;
  flex-direction: column;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .text {
  position: relative;
  width: fit-content;
  margin-right: -1px;
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 24px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.order-desktop .view-4 {
  /* width: 524px; */
  /* align-items: flex-end; */
  gap: 8px;
  /* position: absolute; */
  /* top: 106px; */
  /* left: 0; */
  display: flex;
  flex-direction: column;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .view-5 {
  /* width: 524px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* position: absolute;
  top: 936px;
  left: 625px; */
  margin-bottom: 20px;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .text-2 {
  /* position: absolute; */
  top: 950px;
  left: 1325px;
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 24px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.order-desktop .div-3 {
  display: flex;
  flex-direction: column;
  /* width: 524px; */
  /* align-items: flex-end; */
  gap: 10px;
  /* position: absolute; */
  /* top: 797px; */
  /* left: 625px; */
  margin-bottom: 20px;
}

.order-desktop .text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  color: #4a4b4b;
  font-size: 16px;
  direction: rtl;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;

  @media (min-width: 1440px) {
    font-size: 20px;
  }
}

.order-desktop .view-6 {
  /* width: 524px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* position: absolute; */
  /* top: 585px; */
  /* left: 625px; */
  margin-bottom: 20px;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .frame-3 {
  /* display: inline-flex;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 4px;
  position: relative; */

  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.order-desktop .email {
  /* display: flex;
  flex-direction: column;
  width: 524px;
  align-items: flex-end;
  gap: 10px;
  position: absolute;
  top: 691px;
  left: 625px; */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .div-2 {
  max-width: 524px;
}

.order-desktop .div-4 {
  /* position: relative; */
  /* width: 524px; */
  max-width: 524px;
  height: 46px;
  /* background-color: #ffffff; */
  /* border-radius: 4px; */
  border: 1px solid #c9c9c9;
  /* border-color: #c9c9c9; */
}

.order-desktop .div-5 {
  /* position: absolute;
  top: 1042px;
  left: 625px;
  width: 524px; */
  display: flex;
  flex-direction: column;
  /* align-items: flex-end; */
  gap: 4px;
  margin-bottom: 20px;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .checkbox-option {
  display: inline-flex;
  align-items: center;
  /* justify-content: flex-end; */
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.order-desktop .bases-checkbox {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.order-desktop .thumb {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--white);
  border: 1px solid;
  border-color: #4a4b4b;
}

.order-desktop .icon {
  position: relative;
  width: 2px;
  height: 2px;
  opacity: 0;
}

.order-desktop .color {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1098px;
  /* left: -1128px; */
}

.order-desktop .img {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1148px;
  /* left: -1128px; */
}

.order-desktop .color-2 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1198px;
  /* left: -1128px; */
}

.order-desktop .checkbox-option-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.order-desktop .color-3 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1248px;
  /* left: -1128px; */
}

.order-desktop .color-4 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1298px;
  /* left: -1128px; */
}

.order-desktop .color-5 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1348px;
  /* left: -1128px; */
}

.order-desktop .color-6 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1398px;
  /* left: -1128px; */
}

.order-desktop .frame-wrapper {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: -85px;
  gap: 4px;
  position: relative;
}

.order-desktop .frame-4 {
  display: flex;
  flex-direction: column;
  /* width: 609px; */
  width: 100%;
  max-width: 609px;
  align-items: flex-end;
  gap: 4px;
  position: relative;
}

.order-desktop .frame-5 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  position: relative;
}

.order-desktop .icon-wrapper {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #00b5e2;
}

.order-desktop .color-wrapper {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-right: -1px;
}

.order-desktop .color-7 {
  /* position: absolute; */
  width: 14px;
  height: 10px;
  top: 7px;
  left: 5px;
}

.order-desktop .view-7 {
  /* width: 524px; */
  /* align-items: flex-end; */
  /* gap: 10px; */
  /* position: absolute; */
  /* top: 2815px; */
  /* left: 625px; */
  display: flex;
  flex-direction: column;
}

.order-desktop .view-7 .frame {
  margin-bottom: 6px;

  @media (min-width: 1440px) {
    margin-bottom: 10px;
  }
}

.order-desktop .color-8 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -2871px;
  /* left: -1128px; */
}

.order-desktop .color-9 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -2921px;
  /* left: -1128px; */
}

.order-desktop .view-8 {
  /* width: 524px; */
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  gap: 18px;
  padding: 0px 20px 0px 0px;
  /* position: absolute;
  top: 1690px;
  left: 625px; */
  border-right-width: 2px;
  border-right-style: solid;
  border-color: #00b5e2;

  @media (min-width: 1440px) {
    gap: 20px;
  }
}

.order-desktop .div-6 {
  /* align-items: flex-end; */
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

/* перебиваем стили */
.order-desktop .div-6.delivery-address {
  gap: 8px;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

/* перебиваем стили */
.order-desktop .div-6.delivery-address .div-6 {
  gap: 8px;
}

.order-desktop .div-6.address-radioblock {
  gap: 0;
}

.order-desktop .div-6.address-radioblock .frame {
  margin-bottom: 6px;

  @media (min-width: 1440px) {
    margin-bottom: 10px;
  }
}

.order-desktop .div-6.address-radioblock .radio-option:not(:last-child) {
  margin-bottom: 4px;

  @media (min-width: 1440px) {
    margin-bottom: 10px;
  }
}

.order-desktop .div-6.comments {
  gap: 8px;

  @media (min-width: 1440px) {
    gap: 10px;
  }
}

.order-desktop .color-10 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -2461px;
  /* left: -1108px; */
}

.order-desktop .color-11 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -2511px;
  /* left: -1108px; */
}

.order-desktop .color-12 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -2561px;
  /* left: -1108px; */
}

.order-desktop .div-7 {
  /* width: 524px;
  position: absolute;
  top: 1542px;
  left: 625px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 10px; */
  margin-bottom: 20px;
}

.order-desktop .div-7 .frame {
  margin-bottom: 6px;

  @media (min-width: 1440px) {
    margin-bottom: 10px;
  }
}

.order-desktop .div-7 .radio-option:not(:last-child) {
  margin-bottom: 4px;

  @media (min-width: 1440px) {
    margin-bottom: 10px;
  }
}

.order-desktop .frame-6 {
  display: flex;
  /* width: 254px; */
  width: 100%;
  max-width: 254px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
}

.order-desktop .overlap-group-wrapper {
  position: relative;
  width: 18px;
  height: 16px;
}

.order-desktop .overlap-group {
  position: relative;
  width: 16px;
  height: 16px;
  background-color: #00b5e2;
}

.order-desktop .description {
  /* position: absolute; */
  top: 0;
  /* left: 6px; */
  font-family: "Roboto-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.order-desktop .color-13 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1598px;
  /* left: -1128px; */
}

.order-desktop .frame-7 {
  display: flex;
  width: 198px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
}

.order-desktop .color-14 {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1648px;
  /* left: -1128px; */
}

.order-desktop .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 25px;
  /* position: absolute; */
  top: 3228px;
  /* left: 1037px; */
  background-color: #85c54d;
  transition: all 0.2s ease;
}

.button:active {
  transform: scale(0.96);
  background-color: #e0e0e0;
}

.order-desktop .text-wrapper-7 {
  position: relative;
  width: fit-content;
  /* margin-top: -4px;
  margin-bottom: -2px; */
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;

  @media (min-width: 1440px) {
    font-size: 22px;
  }
}

.order-desktop .stepper {
  /* position: absolute; */
  width: 407px;
  height: 46px;
  top: 246px;
  /* left: 758px; */
}

.stepper .overlap-2 {
  position: relative;
}

.order-desktop .overlap-2 {
  position: relative;
  height: 46px;
}

.order-desktop .tabs {
  /* position: absolute; */
  /* width: 295px; ширина контейнера вкладок по Figma */
  /* height: 46px; */
  /* left: 112px; отступ вправо внутри степпера (870 - 758 = 112) */
  /* top: 0; */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  /* box-sizing: border-box; */
}

.order-desktop .tab,
#tabs-container .tab,
.tab {
  /* display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 26px;
  gap: 10px;
  width: 143px; ширина таба в макете (можно уменьшить/увеличить)
  height: 46px;
  background: #d9d9d9; неактивный фон
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  cursor: pointer;
  flex: none; */

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  /* gap: 10px; */
  min-width: 84px; /*ширина таба в макете (можно уменьшить/увеличить) */
  height: 40px;
  background: #fff; /*неактивный фон*/
  border-radius: 4px;
  border: 1px solid #c9c9c9;
  cursor: pointer;
  flex: none;

  @media (min-width: 1440px) {
    padding: 12px 26px;
    min-width: 133px;
    height: 46px;
  }
}

.order-desktop .text-wrapper-8 {
  color: #000000;
  position: relative;
  width: fit-content;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;
}

.order-desktop .div-wrapper {
  display: inline-flex;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 4px 4px 0px 0px;
  border: 1px solid;
  border-color: #85c54d;
}

.order-desktop .text-wrapper-9 {
  color: #85c54d;
  position: relative;
  width: fit-content;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;
}

.order-desktop .line,
#stepper .line {
  position: absolute;
  /* width: 290px; Line 1 width */
  /* width: 100%;
  max-width: 290px; */
  width: 70%;
  height: 0;
  /* left: 106px; left: 864 - 758 = 106  (подгоняйте при необходимости) */
  /* top: 45px; чуть ниже табов (46px) */
  border-top: 1px solid #85c54d;
  transform: rotate(-180deg);
  z-index: 110;
}

.order-desktop .line-2,
#stepper .line-2 {
  position: absolute;
  /* width: 110px; Line 2 width */
  /* width: 100%;
  max-width: 110px; */
  width: 30%;
  height: 0;
  left: 0; /* left: 758 - 758 = 0  (подгоняйте) */
  /* top: 45px; */
  border-top: 1px dashed #85c54d;
  transform: rotate(-180deg);
  z-index: 110;
}

.order-desktop .text-3 {
  /* position: absolute; */
  top: 412px;
  /* left: 1258px; */
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.hidden {
  display: none;
}

/* .stepper {
  margin-top: 20px;
} */

.tabs {
  display: flex;
  justify-content: flex-end; /* всё прижимается вправо */
  gap: 8px;
  flex-wrap: nowrap; /* в одну линию */
}

.tabs {
  display: block;
}

#tabs-container {
  display: flex;
  flex-direction: row-reverse;
  /* justify-content: flex-end; прижимаем вправо */
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  width: 100%;
  /* box-sizing: border-box; */
  /* padding-right: 120px; ✅ небольшой отступ от края */
}

/* базовый таб */
.tab {
  flex: 0 0 auto; /* не растягивается */
  padding: 8px 14px;
  background: #f1f1f1;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
}

/* פרטי הלקוח всегда последний (справа) */
#customer-tab {
  order: 9999;
}

.tab:hover {
  background: #e2e2e2;
}

/* активный */
.tab.active {
  background: #ffffff;
  border: 1.5px solid #85c54d;
  color: #85c54d;
}

#tabs-container .tab.active {
  background: #ffffff;
  border: 1.5px solid #85c54d;

  @media (min-width: 1440px) {
    border: 2px solid #85c54d;
  }
}

.tab.active .text-wrapper-8,
.tab.active .text-wrapper-9 {
  color: #85c54d;
  width: fit-content;
  font-weight: 700;
}

.tab .text-wrapper-8,
.tab .text-wrapper-9 {
  /* font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: right; ваш RTL
  color: #000;
  direction: rtl; */
  width: fit-content;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #4a4b4b;

  @media (min-width: 1440px) {
    font-size: 16px;
  }
}

.page {
  display: none;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.page.active {
  display: block;
}

/* Базовые стили для поля ввода */
#phone {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #4a4b4b;
  text-align: right;
  direction: ltr;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  outline: none;
  transition: all 0.3s ease;
}

/* Состояние hover */
#phone:hover {
  border: 1px solid #4a4b4b;
}

/* Состояние focus */
#phone:focus {
  border: 2px solid #00b5e2;
  padding: 2px 12px; /* Компенсация увеличенного border */
}

/* Состояние error */
#phone.error {
  border: 2px solid #ff4d5a;
}

/* Сообщение об ошибке */
.phone-error-message {
  display: none;
  /* width: 200px; */
  width: 100%;
  max-width: 200px;
  margin-top: -8px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 21px;
  color: #ff4d5a;
  text-align: right;
  direction: rtl;
}

#phone.error ~ .phone-error-message {
  display: block;
}

/* Плейсхолдер */
#phone::placeholder {
  color: #4a4b4b;
  opacity: 0.6;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  line-height: 23px;
}

/* .email {
  position: relative;
  width: 524px;
  margin-bottom: 20px;
} */

.div-4 {
  position: relative;
  width: 100%;
}

/* Стили для поля ввода */
#email {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #4a4b4b;
  text-align: right;
  direction: ltr;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  outline: none;
  transition: all 0.3s ease;
}

/* Состояния поля */
#email:hover {
  border-color: #4a4b4b;
}

#email:focus {
  border: 2px solid #00b5e2;
  padding: 2px 12px; /* Компенсация для увеличенного border */
}

#email.error {
  border: 2px solid #ff4d5a;
}

/* Сообщение об ошибке */
.email-error-message {
  display: none;
  width: 100%;
  margin-top: -8px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: #ff4d5a;
  text-align: right;
  direction: rtl;
}

#email.error + .email-error-message {
  display: block;
}

/* Стили для строк с чекбоксами */
.checkbox-row {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  width: 100%;
}

/* Базовые стили для чекбоксов */
.checkbox-option {
  height: 40px;
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  gap: 8px;
}

/* Кастомный чекбокс - скрываем оригинальный */
.custom-checkbox {
  position: absolute;
  opacity: 0;
}

/* Стилизация видимой части чекбокса */
.custom-checkbox + label {
  position: relative;
  cursor: pointer;
  padding-right: 36px;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  direction: rtl;
  margin: 0;

  @media (min-width: 1440px) {
    font-size: 20px;
  }
}

/* Квадратик чекбокса */
.custom-checkbox + label:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  border: 1px solid #4a4b4b;
  transition: all 0.2s ease;
}

/* Галочка (обновленная, теперь видимая) */
.custom-checkbox + label:after {
  content: "";
  position: absolute;
  /* right: 3px; */
  right: 4px;
  top: 50%;
  width: 14px;
  height: 8px;
  border: solid white;
  border-width: 0 0 2px 2px;
  transform: translateY(-60%) rotate(-45deg);
  opacity: 0;
  transition: all 0.2s ease;
  border-radius: 1px;
}

/* Состояние "checked" */
.custom-checkbox:checked + label:before {
  background-color: #00b5e2;
  border-color: #00b5e2;
}

.custom-checkbox:checked + label:after {
  opacity: 1;
}

/* Анимация при клике */
.custom-checkbox:active + label:before {
  transform: translateY(-50%) scale(0.95);
}

/* Поле для "אחר" */
#other-role-container {
  width: 100%;
  margin-top: 4px;
  display: none;
}

#other-role {
  width: 100%;
  height: 48px;
  padding: 12px;
  font-size: 0px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
}

/* Каждый чекбокс (повторяется 8 раз) */
.order-desktop .div-5 .checkbox-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* margin-bottom: 18px; Отступ снизу как в div-7 */
  /* padding-right: 12px; Отступ справа */
  padding: 9px 9px 9px 0px;
}

/* Текст */
.order-desktop .div-5 .checkbox-option label {
  font-family: "Roboto-Regular", Helvetica;
  font-size: 16px;
  /* color: #4a4b4b; */
  color: #000000;
  padding-right: 36px; /* Расстояние текст-чекбокс */
  margin: 0;

  @media (min-width: 1440px) {
    font-size: 20px;
  }
}

/* Квадратик чекбокса */
.order-desktop .div-5 .custom-checkbox + label:before {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid #4a4b4b;
  box-sizing: border-box;
}

/* Галочка */
.order-desktop .div-5 .custom-checkbox:checked + label:after {
  /* right: 3px; */
  right: 4px;
  width: 14px;
  height: 8px;
  border-radius: 1px;
}

/* Стили для контейнера поля ввода */
#other-role-container.input-container {
  /* width: 524px; */
  width: 100%;
  max-width: 524px;
  /* margin-top: 16px; */
  display: none; /* По умолчанию скрыто */
}

/* Обертка для input + error message */
.input-wrapper {
  position: relative;
  width: 100%;
}

/* Базовые стили поля ввода */
#other-role.text-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 524px;
  height: 48px;
  padding: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #4a4b4b;
  text-align: right;
  direction: rtl;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  outline: none;
  transition: all 0.3s ease;
}

/* Состояние hover */
#other-role.text-input:hover {
  border-color: #4a4b4b;
}

/* Состояние focus */
#other-role.text-input:focus {
  border: 2px solid #00b5e2;
  padding: 11px; /* Компенсация для увеличенного border */
}

.radio-option {
  height: 40px;
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  /* margin-bottom: 16px; */
  /* gap: 8px; */
  padding: 9px 9px 9px 0px;
}

/* Скрываем настоящий radio */
.custom-radio {
  position: absolute;
  opacity: 0;
}

/* Стилизация квадратика (как у чекбокса) */
.custom-radio + label {
  position: relative;
  cursor: pointer;
  padding-right: 36px;
  font-family: "Roboto-Regular", Helvetica;
  font-size: 16px;
  color: #000000;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;

  @media (min-width: 1440px) {
    font-size: 20px;
  }
}

.custom-radio + label:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: #ffffff;
  border: 1px solid #4a4b4b;
  transition: all 0.2s ease;
}

/* Галочка (как у чекбокса) */
.custom-radio:checked + label:after {
  content: "";
  position: absolute;
  /* right: 3px; */
  right: 4px;
  top: 50%;
  width: 14px;
  height: 8px;
  border: solid white;
  border-width: 0 0 2px 2px;
  transform: translateY(-60%) rotate(-45deg);
  border-radius: 1px;
}

/* Цвет при выборе (как у чекбокса) */
.custom-radio:checked + label:before {
  background: #00b5e2;
  border-color: #00b5e2;
}

/* Стили для иконки "i" (квадратной) */
.info-icon-wrapper {
  position: absolute;
  left: -22px;
  top: -12px;
  display: flex;
  /* margin-right: 4px; Отступ между иконкой и текстом */
  /* margin-left: 0; */
  /* order: -1; Перемещаем иконку в начало */
}

.info-icon {
  width: 16px;
  height: 16px;
  background: #00b5e2;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
}

/* Стили для попапа (без изменений) */
.info-popup {
  box-sizing: border-box;
  position: absolute;
  right: -192px;
  bottom: 100%;
  /* mobile нужно смотреть не ломает ли */
  width: 323px;
  /* width: 80vw; */
  /* width: 100%; */
  /* max-width: 379px; */
  padding: 12px;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  color: #4a4b4b;
  text-align: right;
  z-index: 10;
  display: none;
  margin-bottom: 10px;

  @media (min-width: 1440px) {
    right: 0;
    width: 379px;
  }
}

.info-popup.second {
  right: -152px;

  @media (min-width: 1440px) {
    right: 0;
    width: 379px;
  }
}

.info-icon-wrapper:hover .info-popup {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* Анимация появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#delivery-info-container {
  transition: all 0.3s ease;
}

/* Стили для полей ввода (аналогичные другим полям формы) */
.view-8 .div-2 {
  height: 48px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #c9c9c9;
  width: 100%;
}

/* Дополнительные стили для чекбоксов (если нужно) */
.view-8 .checkbox-option {
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  gap: 8px;
  margin-bottom: 8px;
}

.input-field {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #4a4b4b;
  text-align: right;
  direction: rtl;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  outline: none;
  transition: all 0.3s ease;
}

/* Состояния полей ввода */
.input-field:hover {
  border-color: #4a4b4b;
}

.input-field:focus {
  border: 2px solid #00b5e2;
  padding: 11px; /* Компенсация для увеличенного border */
}

.input-field.error {
  border: 2px solid #ff4d5a;
}

/* Текстовое поле */
textarea.input-field {
  height: 100px;
  resize: vertical;
  padding: 12px;
}

/* ===== Стили для блока доставки ===== */
#delivery-info-container {
  transition: all 0.3s ease;
  overflow: hidden;
}

/* ===== Адаптация для RTL ===== */
[dir="rtl"] .input-field,
[dir="rtl"] .custom-radio + label {
  text-align: right;
  direction: rtl;
}

/* ===== Сообщения об ошибках ===== */
.error-message {
  color: #ff4d5a;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  text-align: right;
  margin-top: 5px;
  display: none;
}

.input-field.error + .error-message {
  display: block;
}

/* Стиль для поля комментариев */
.delivery-notes {
  box-sizing: border-box;
  width: 100%;
  max-width: 524px;
  height: 72px; /* В 1.5 раза больше обычного поля (48px * 1.5) */
  padding: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #4a4b4b;
  text-align: right;
  direction: rtl;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  outline: none;
  transition: all 0.3s ease;
  resize: none; /* Запрещаем изменение размера */

  @media (min-width: 1440px) {
    max-width: 504px;
  }
}

.delivery-notes:hover {
  border-color: #4a4b4b;
}

.delivery-notes:focus {
  border: 2px solid #00b5e2;
  padding: 11px;
}

/* Специальный стиль для телефона */
.phone-input {
  direction: ltr !important; /* Принудительно LTR */
  /* text-align: left !important; */
  unicode-bidi: plaintext; /* Для правильного отображения RTL/LTR смешанного текста */
}

/* Для контейнера телефона */
.phone-container {
  direction: rtl; /* Контейнер остается RTL */
}

/* Стили для поля даты */
.date-input {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

.date-error-message {
  display: none;
  color: #ff4d5a;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  text-align: right;
  margin-top: -5px;
}

.date-input.error {
  border: 2px solid #ff4d5a;
}

.date-input.error ~ .date-error-message {
  display: block;
}

/* Стили для чекбоксов (как в предыдущих) */
.view-7 .checkbox-option {
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  /* margin-bottom: 12px; */
  margin-bottom: 4px;
  gap: 8px;

  @media (min-width: 1440px) {
    margin-bottom: 10px;
  }
}

/* .view-7 .checkbox-option:not(:last-child) {
  margin-bottom: 4px;
} */

.view-7 .custom-checkbox {
  position: absolute;
  opacity: 0;
}

.view-7 .custom-checkbox + label {
  position: relative;
  cursor: pointer;
  padding-right: 32px;
  font-family: "Roboto-Regular", Helvetica;
  font-size: 20px;
  color: #4a4b4b;
  display: flex;
  align-items: center;
}

/* Квадратик чекбокса */
.view-7 .custom-checkbox + label:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  border: 1px solid #4a4b4b;
  transition: all 0.2s ease;
}

/* Галочка */
.view-7 .custom-checkbox:checked + label:after {
  content: "";
  position: absolute;
  /* right: 3px; */
  right: 4px;
  top: 50%;
  width: 14px;
  height: 8px;
  border: solid white;
  border-width: 0 0 2px 2px;
  transform: translateY(-60%) rotate(-45deg);
  border-radius: 1px;
}

/* Цвет при выборе */
.view-7 .custom-checkbox:checked + label:before {
  background: #00b5e2;
  border-color: #00b5e2;
}

/* Информационное сообщение */
.view-7 .info-message {
  cursor: default;
  opacity: 0.7;
  /* margin-top: 8px; */
}

.view-7 .info-message .text-wrapper-4 {
  font-size: 18px;
}

/* Контейнер для поля заметок */
.notes-container {
  /* margin-bottom: 20px; */
  transition: margin-bottom 0.3s ease;
}

/* Стили для textarea */
.notes-textarea {
  width: 100%;
  max-width: 524px;
  min-height: 80px;
  padding: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: #4a4b4b;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  resize: vertical; /* Разрешаем изменять размер только по вертикали */
  overflow: auto; /* Автоматический скролл при необходимости */
  direction: rtl;
  text-align: right;
  transition: height 0.3s ease;
}

/* Состояния поля */
.notes-textarea:hover {
  border-color: #4a4b4b;
}

.notes-textarea:focus {
  border: 2px solid #00b5e2;
  outline: none;
  padding: 11px; /* Компенсация для увеличенного border */
}

/* Фикс для резкого изменения размера */
.notes-textarea::-webkit-resizer {
  background-color: transparent;
  border-width: 8px;
  border-style: solid;
  border-color: transparent #00b5e2 #00b5e2 transparent;
}

/* Адаптация для других элементов при изменении размера */
.notes-textarea:active,
.notes-textarea:focus {
  margin-bottom: 20px; /* Добавляем отступ при активном изменении размера */
}

.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #fff;
}

.input-field:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Стили для обязательных полей */
.text-wrapper-2 {
  color: red;
  /* margin-right: 5px; */
}

/* Добавляем стили для нового контейнера */
.move-1 {
  /* position: absolute; */
  /* width: 524px; */
  /* left: 625px; */
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: top 0.3s ease; /* Добавляем плавное перемещение */
}

.move-1.pickup {
  top: 1670px;
}

/* .move-1.delivery {
  top: 2710px;
} */

/* Удаляем старые позиционирования для элементов внутри move-1 */
.move-1 .view-2,
.move-1 .view-7,
.move-1 .view-3,
.move-1 .view-4,
.move-1 .frame-2 {
  position: static !important;
  top: auto !important;
  /* left: auto !important; */
  width: 100%;
}

/* Корректируем высоту основного контейнера */
.order-desktop .div {
  height: auto; /* Меняем фиксированную высоту на auto */
  /* padding-bottom: 4000px; Добавляем отступ снизу */
}

/* Стили кнопки */
.move-1 .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 48px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #85c54d;
  /* border-radius: 6px; */
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.move-1 .button:hover {
  /* previous */
  /* background-color: #7bbd48; */
  /* design */
  background-color: #72aa42;
}

.move-1 .button:active {
  transform: scale(0.96);
  background-color: #6fa33d;
}

/* Контейнер для кнопки и надписи */
.button-wrapper {
  display: flex;
  flex-direction: column;
  /* align-items: flex-end; надпись будет под кнопкой справа */
  gap: 10px; /* отступ между кнопкой и текстом */
  /* position: absolute;
  right: 0;
  bottom: 0; */
  margin-top: 10px;

  @media (min-width: 1440px) {
    gap: 20px;
    margin-top: 20px;
  }
}

/* .button-wrapper { */
/* display: flex; */
/* flex-direction: column; */
/* align-items: flex-end; */
/* gap: 10px; расстояние между кнопкой и подписью */
/* margin-top: 20px; отодвигает блок вниз от textarea */
/* position: relative; если нужно для вложенных элементов */
/* } */

/* Стили кнопки */
.button-wrapper .button {
  padding: 18px 25px;
  all: unset;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 20%; */
  width: fit-content;
  min-width: 106px;
  height: 48px;
  background: #85c54d;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;

  @media (min-width: 1440px) {
    width: 112px;
    height: 56px;
  }
}

.button-wrapper .button:hover {
  /* previous */
  /* background-color: #7bbd48; */
  /* design */
  background-color: #72aa42;
}

.button-wrapper .button:active {
  transform: scale(0.96);
  background-color: #6fa33d;
}

.button-wrapper .text-wrapper-5,
.button-wrapper .text-wrapper-4 {
  font-size: 16px;
}

/* Для RTL-страниц */
body:lang(he) #phone {
  unicode-bidi: isolate;
}

.order-desktop .stepper,
#stepper {
  margin-bottom: 30px;
  /* position: relative; */
  /* left: 758px; */
  /* top: 140px; */
  /* width: 407px; */
  width: 100%;
  max-width: 609px;
  height: 48px;
  /* overflow-x: scroll; */
  /* z-index: 120; */

  @media (min-width: 1440px) {
    margin-bottom: 40px;
  }
}

#pages-container {
  /* overflow-y: auto; auto или scroll
  height: 100%; фиксированная или ограниченная высота */
}

#page-customer {
  width: 100%;
}

.logo {
  /* position: relative;  свободное позиционирование
  top: 80px;
  right: -900px;
  z-index: 1000;       чтобы логотип был поверх остальных элементов */
  width: 95px;
  margin-bottom: 20px;

  @media (min-width: 1440px) {
    width: 219px;
    margin-bottom: 60px;
  }
}

/* ================================= */
/* Добавляем новые стили для страниц */
/* ================================= */

.product-page {
  background-color: #ffffff;
  width: 100%;
  max-width: 1440px; /* ограничиваем ширину, но не 1440px */
  margin: 0 auto; /* центрируем */
  /* padding: 20px 40px;    /* внутренние отступы */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}
.product-page h1,
.product-page h2,
.product-page p,
.product-page label {
  direction: rtl;
  text-align: right;
}
.product-page .input-text,
.product-page .quantity-input,
.product-page .file-input {
  width: 100%;
  max-width: 500px; /* чтобы не расползалось */
}

.product-page .div {
  background-color: #ffffff;
  /* width: 1440px; */
  width: 100%;
  max-width: 1440px;
  height: 2683px;
  position: relative;
}

.product-page .text-wrapper {
  /* position: absolute; */
  top: 333px;
  /* left: 1010px; */
  font-family: "Roboto-Bold", Helvetica;
  font-weight: 700;
  color: #4a4b4b;
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;
}

.product-page .p {
  /* position: absolute; */
  top: 821px;
  /* left: 828px; */
  font-family: "Roboto-Bold", Helvetica;
  font-weight: 700;
  color: #4a4b4b;
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;
}

.product-page .text-wrapper-2 {
  /* position: absolute; */
  top: 879px;
  /* left: 602px; */
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 20px;
  white-space: nowrap;
  direction: rtl;
  color: #4a4b4b;
  letter-spacing: 0;
  line-height: normal;
}

.product-page .text-wrapper-3 {
  /* position: absolute; */
  top: 395px;
  /* left: 505px; */
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 20px;
  direction: rtl;
  color: #4a4b4b;
  letter-spacing: 0;
  line-height: normal;
}

.product-page .view {
  display: flex;
  flex-direction: column;
  /* width: 485px; */
  width: 100%;
  max-width: 485px;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
  top: 479px;
  /* left: 625px; */
}

.product-page .frame {
  display: flex;
  flex-direction: column; /* или row в зависимости от нужного направления */
  align-items: flex-end; /* выравнивание по правому краю */
  justify-content: flex-start; /* или space-between если нужно */
  gap: 4px;
  width: 100%;
  text-align: right;
  /* left: 0; убрать отрицательный отступ */
  right: 0; /* прижать к правому краю */
  padding: 0 10px; /* добавить отступы если нужно */
  box-sizing: border-box; /* чтобы padding не ломал ширину */
}

.product-page .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  color: #4a4b4b;
  font-size: 20px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.product-page .text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  /* margin-left: auto; Добавьте эту строку */
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 24px;
  white-space: nowrap;
  direction: rtl;
  color: #4a4b4b;
  letter-spacing: 0;
  line-height: normal;
}

.product-page .input-text {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid;
  border-color: #c9c9c9;
}

.product-page .view-2 {
  display: flex;
  /* width: 524px; */
  width: 100%;
  max-width: 524px;
  top: 1614px;
  /* left: 625px; */
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
}

.product-page .view-3 {
  display: flex;
  /* width: 120px; */
  width: 100%;
  max-width: 120px;
  top: 691px;
  /* left: 990px; */
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
}

.product-page .quantity-input {
  display: flex;
  /* width: 118px; */
  width: 100%;
  max-width: 118px;
  height: 53px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  position: relative;
  border-radius: 4px;
  border: 1px solid;
  border-color: #c9c9c9;
}

.product-page .subtract {
  position: relative;
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.product-page .round-content-remove {
  height: 2px;
  top: 9px;
  position: relative;
  width: 12px;
  /* left: 4px; */
  background-image: url(./img/icon-color-3.svg);
  background-size: 100% 100%;
}

.product-page .quantity-number {
  position: relative;
  width: fit-content;
  font-family: var(--subhead-font-family);
  font-weight: var(--subhead-font-weight);
  color: #4a4b4b;
  font-size: var(--subhead-font-size);
  text-align: center;
  letter-spacing: var(--subhead-letter-spacing);
  line-height: var(--subhead-line-height);
  font-style: var(--subhead-font-style);
}

.product-page .add {
  position: relative;
  width: 20px;
  height: 20px;
}

.product-page .round-content-add {
  height: 12px;
  top: 4px;
  position: relative;
  width: 12px;
  /* left: 4px; */
  background-image: url(./img/icon-color-4.svg);
  background-size: 100% 100%;
}

.product-page .element {
  display: flex;
  flex-direction: column;
  /* width: 524px; */
  width: 100%;
  max-width: 524px;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
  top: 1057px;
  /* left: 625px; */
}

.product-page .round-content-remove-2 {
  height: 2px;
  top: 9px;
  position: relative;
  width: 12px;
  /* left: 4px; */
  background-image: url(./img/icon-color-2.svg);
  background-size: 100% 100%;
}

.product-page .round-content-add-2 {
  height: 12px;
  top: 4px;
  position: relative;
  width: 12px;
  /* left: 4px; */
  background-image: url(./img/icon-color.svg);
  background-size: 100% 100%;
}

.product-page .view-4 {
  display: flex;
  /* width: 524px; */
  width: 100%;
  max-width: 524px;
  top: 585px;
  /* left: 585px; */
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
  direction: rtl; /* Для арабских и ивритских языков */
}

.product-page .view-5 {
  display: flex;
  /* width: 524px; */
  width: 100%;
  max-width: 524px;
  top: 943px;
  /* left: 625px; */
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
}

.product-page .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 25px;
  position: relative;
  background-color: #85c54d;
}

.product-page .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -4px;
  margin-bottom: -2px;
  font-family: "Roboto-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;
}

.product-page .view-6 {
  display: inline-flex;
  top: 1168px;
  /* left: 448px; */
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
}

.product-page .checkbox-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.product-page .frame-wrapper {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.product-page .frame-2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.product-page .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 20px;
  white-space: nowrap;
  direction: rtl;
  color: #4a4b4b;
  letter-spacing: 0;
  line-height: normal;
}

.product-page .bases-checkbox {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.product-page .thumb {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--white);
  border: 1px solid;
  border-color: #4a4b4b;
}

.product-page .icon {
  position: relative;
  width: 2px;
  height: 2px;
  opacity: 0;
}

.product-page .color {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  top: -1224px;
  /* left: -2612px; */
}

.product-page .img {
  top: -1274px;
  /* left: -2612px; */
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

.product-page .color-2 {
  top: -1324px;
  /* left: -2612px; */
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

.product-page .color-3 {
  top: -1374px;
  /* left: -2612px; */
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

.product-page .color-4 {
  top: -1424px;
  /* left: -2612px; */
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

.product-page .div-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
  top: 1466px;
  /* left: 920px; */
}

.product-page .color-5 {
  top: -1522px;
  /* left: -2614px; */
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

.product-page .color-6 {
  top: -1572px;
  /* left: -2614px; */
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

.product-page .frame-3 {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  /* position: absolute; */
  top: 1740px;
  /* left: 1044px; */
}

.product-page .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 20px;
  white-space: nowrap;
  direction: rtl;
  color: #4a4b4b;
  letter-spacing: 0;
  line-height: normal;
}

.product-page .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 18px;
  text-align: right;
  white-space: nowrap;
  color: #4a4b4b;
  letter-spacing: 0;
  line-height: normal;
}

.product-page .div-wrapper {
  all: unset;
  box-sizing: border-box;
  /* left: 942px; */
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 25px;
  /* position: absolute; */
  top: 1783px;
  background-color: #85c54d;
}

.product-page .button-2 {
  all: unset;
  box-sizing: border-box;
  /* left: 720px; */
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 25px;
  /* position: absolute; */
  top: 1783px;
  background-color: #85c54d;
}

.product-page .frame-4 {
  display: flex;
  flex-direction: column;
  /* width: 515px; */
  width: 100%;
  max-width: 515px;
  align-items: flex-end;
  gap: 10px;
  /* position: absolute; */
  top: 1902px;
  /* left: 634px; */
}

.product-page .frame-5 {
  position: relative;
  width: 1px;
  height: 23px;
  margin-right: -1px;
}

.product-page .checkbox-option-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.product-page .frame-6 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
  /* margin-left: -263px; */
}

.product-page .text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 20px;
  direction: rtl;
  color: #4a4b4b;
  letter-spacing: 0;
  line-height: normal;
}

.product-page .color-7 {
  top: -1968px;
  /* left: -2624px; */
  /* position: absolute; */
  width: 1px;
  height: 1px;
}

.product-page .button-3 {
  all: unset;
  box-sizing: border-box;
  /* left: 485px; */
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 25px;
  /* position: absolute; */
  top: 1783px;
  background-color: #85c54d;
}

.product-page .image {
  /* position: absolute; */
  /* width: 219px; */
  width: 100%;
  max-width: 219px;
  height: 126px;
  top: 60px;
  /* left: 930px; */
  aspect-ratio: 1.74;
  object-fit: cover;
}

.product-page .stepper {
  /* position: absolute; */
  /* width: 568px; */
  width: 100%;
  max-width: 568px;
  height: 46px;
  top: 246px;
  /* left: 642px; */
}

.product-page .overlap-group {
  position: relative;
  height: 46px;
}

.product-page .text-wrapper-11 {
  color: #000000;
  position: relative;
  width: fit-content;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;
}

.product-page .tab-2 {
  display: inline-flex;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 4px 4px 0px 0px;
  border: 1px solid;
  border-color: #85c54d;
}

.product-page .text-wrapper-12 {
  color: #85c54d;
  position: relative;
  width: fit-content;
  font-family: "Roboto-Regular", Helvetica;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  direction: rtl;
}

.product-page .line {
  /* width: 409px; */
  width: 100%;
  max-width: 409px;
  left: 103px;
  position: absolute;
  height: 1px;
  /* top: 45px; */
  object-fit: cover;
}

.product-page .line-2 {
  /* width: 110px; */
  width: 100%;
  max-width: 110px;
  left: 0;
  /* position: absolute; */
  height: 1px;
  top: 45px;
  object-fit: cover;
}
/* Original CSS code should be injected here */

/* Additional styles for semantic improvements and accessibility */
.file-input {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox-input,
.radio-input {
  /* position: absolute; */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkbox-input:checked + .icon,
.radio-input:checked + .icon {
  opacity: 1;
}

.checkbox-input:focus + .icon,
.radio-input:focus + .icon {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.product-header {
  position: relative;
}

.product-form {
  position: relative;
}

.action-buttons {
  position: relative;
}

/* Ensure proper focus styles for interactive elements */
.quantity-input button:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.bases-checkbox:focus-within {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Improve button accessibility */
.button:disabled,
.div-wrapper:disabled,
.button-2:disabled,
.button-3:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .product-page .div {
    width: 100%;
    /* max-width: 100vw; */
    padding: 20px;
  }

  .view,
  .view-2,
  .view-3,
  .view-4,
  .view-5,
  .view-6,
  .element,
  .div-2 {
    position: static;
    width: 100%;
    /* margin-bottom: 20px; */
    /* max-width: 524px; */
  }

  .stepper {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }

  .image {
    position: static;
    width: 100%;
    max-width: 219px;
    height: auto;
    margin-bottom: 20px;
  }
}

/* for clients' names */
.names-textarea-wrapper {
  position: relative;
  width: 100%;
  max-width: 524px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
}

/* .input-area */
.names-textarea {
  direction: rtl;
  box-sizing: border-box;
  width: 100%;
  height: 110px;
  margin: 0;
  border: 0;
  outline: none;
  resize: vertical;
  overflow: auto;
  font-size: 16px;
  line-height: 1.5; /* ВАЖНО: тот же, что у номеров */
  padding: 10px;
  padding-right: 60px; /* место под колонку номеров справа */
  resize: block;
}

/* Колонка номеров (справа, поверх) */
.line-numbers {
  position: absolute;
  top: 0;
  right: 0; /* справа */
  width: 50px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 8px 10px 6px;
  border-left: 1px solid #e7e7e7;
  background: #f7f7f7;
  color: #6d6d6d;
  pointer-events: none; /* клики проходят сквозь */
  overflow: hidden; /* без собственной прокрутки */
}

/* Внутренний контейнер текста номеров */
.line-numbers > div {
  white-space: pre; /* ВАЖНО: сохраняем переносы строк */
  direction: ltr; /* цифры идут слева-направо */
  text-align: left; /* цифры прижаты к левой кромке колонки (ближе к тексту) */
  line-height: 1.5; /* как у textarea */
  font-size: 16px;
  transform: translateY(0); /* будет смещаться при скролле */
}
/*  */