form.cart.roller-shutter-cart {
  display: flex;
  flex-direction: column;
}

.rtx-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.rtx-options.col-2 .rtx-option {
  width: calc(50% - 10px);
}
.rtx-options.col-4 {
  gap: 10px;
}

.rtx-options.col-4 .rtx-option {
  width: calc(25% - 10px);
}

.rtx-option {
  background: #fff;
  position: relative;
}

.rtx-option input {
  display: none;
}

.rtx-option-content {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.most-chosen {
  position: absolute;
  top: 10px;
  left: 10px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 7px 8px 4px;
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin: 0;
  max-width: 75%;
  font-size: 12.2px;
  font-weight: 400;
  background-color: #103550;
  color: #ffffff;
}
h3.rtx-option-title {
  margin: 20px 0;
}
.rtx-option-label {
  cursor: pointer;
  display: block;
  border: 2px solid #f1f1f1;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rtx-option input:checked + .rtx-option-label {
  border-color: red;
}

.rtx-option-image-container {
  width: 100%;
}

img.rtx-option-image {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: none;
}

.rtx-option-color-container {
  width: 100%;
  aspect-ratio: 1/0.6;
}

.rtx-option-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rtx-option-title {
  font-weight: bold;
  font-size: 16px;
}

.rtx-option-price {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #38b549;
  background-color: #e8f5e9;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.rtx-option-sub-title {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 20px;
}

.rtx-option-specifications {
  margin-bottom: 10px;
}

.rtx-option-specification {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.rtx-option-specification-content {
  margin-left: 8px;
}

.rtx-option-indicator {
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  background: #f5f5f5;
  font-weight: bold;
}

.rtx-option input:checked + .rtx-option-label .rtx-option-indicator {
  background: red;
  color: #fff;
}

.rtx-option-indicator .active {
  display: none;
}

.rtx-option input:checked + .rtx-option-label .rtx-option-indicator .inactive {
  display: none;
}

.rtx-option input:checked + .rtx-option-label .rtx-option-indicator .active,
.rtx-option-indicator span.inactive {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.rtx-option input:checked + .rtx-option-label .rtx-option {
  border-color: #103550;
}

.info-popup-trigger {
  cursor: pointer;
}

.info-popup-content-wrapper {
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
}

.info-popup-content-wrapper.active {
  display: flex;
}

.info-popup-content {
  background: white;
  width: 55vw;
  -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
  padding: 60px 60px 100px 60px;
  font-size: 14px;
  color: black !important;
  max-height: 80vh;
  border-radius: 15px;
  opacity: 1;
  overflow: hidden;
  position: relative;
  line-height: 1.6;
}

.info-popup-content-html {
  height: calc(80vh - 120px);
  overflow: auto;
}

span.info-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

span.info-popup-close .rtx-icon.cross::before {
  width: 30px;
  height: 30px;
}

.rtx-fields-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.rtx-field-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rtx-field-wrapper label {
  width: 35%;
  font-size: 14px;
}

.rtx-field-wrapper .rtx-input-wrapper {
  flex: 1;
}

span.rtx-input-range {
  display: block;
  font-size: 12px;
  color: red;
}

.rtx-dimension-measurement-container {
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  margin-top: 20px;
  text-align: center;
  background: #fff;
  padding: 20px;
}

.rtx-dimension-measurement-container .image-container {
  position: relative;
  padding: 35px 80px 0px 80px;
  display: inline-block;
  max-width: 400px;
}

.rtx-dimension-measurement-container img {
  box-shadow: none;
}

.rtx-dimension-measurement-container .image-container span {
  position: absolute;
}

.rtx-dimension-measurement-container .image-container .svg-width {
  transform: translate(-50%, 0);
  left: 50%;
  top: 20px;
}

.rtx-dimension-measurement-container .image-container .svg-height {
  transform: translate(0, -50%);
  left: 20px;
  top: calc(50% + 25px);
}

.rtx-dimension-measurement-container .image-container .svg-housing-size {
  left: calc(100% - 96px);
  top: 52px;
}
.rtx-dimension-measurement-container .image-container .svg-rail-height {
  left: calc(100% - 89px);
  top: 134px;
}

.specifications-option strong {
  width: 35%;
}

.specifications-option {
  display: flex;
}

/* Icon styles */

span.rtx-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rtx-icon.info::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 14px;
  font-style: italic;
  font-weight: bold;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDhDMTE5LjA0MyA4IDggMTE5LjA4MyA4IDI1NmMwIDEzNi45OTcgMTExLjA0MyAyNDggMjQ4IDI0OHMyNDgtMTExLjAwMyAyNDgtMjQ4QzUwNCAxMTkuMDgzIDM5Mi45NTcgOCAyNTYgOG0wIDExMGMyMy4xOTYgMCA0MiAxOC44MDQgNDIgNDJzLTE4LjgwNCA0Mi00MiA0Mi00Mi0xOC44MDQtNDItNDIgMTguODA0LTQyIDQyLTQybTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ6Ii8+PC9zdmc+);
  background-repeat: no-repeat;
  background-position: center;
}

.rtx-icon.plus::before {
  content: "";
  width: 15px;
  height: 15px;
  display: inline-block;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDE2IDIwOEgyNzJWNjRjMC0xNy42Ny0xNC4zMy0zMi0zMi0zMmgtMzJjLTE3LjY3IDAtMzIgMTQuMzMtMzIgMzJ2MTQ0SDMyYy0xNy42NyAwLTMyIDE0LjMzLTMyIDMydjMyYzAgMTcuNjcgMTQuMzMgMzIgMzIgMzJoMTQ0djE0NGMwIDE3LjY3IDE0LjMzIDMyIDMyIDMyaDMyYzE3LjY3IDAgMzItMTQuMzMgMzItMzJWMzA0aDE0NGMxNy42NyAwIDMyLTE0LjMzIDMyLTMydi0zMmMwLTE3LjY3LTE0LjMzLTMyLTMyLTMyIi8+PC9zdmc+);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.rtx-icon.cross::before {
  content: "";
  width: 15px;
  height: 15px;
  display: inline-block;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTIgNTEyIj48cGF0aCBkPSJtMjQyLjcyIDI1NiAxMDAuMDctMTAwLjA3YzEyLjI4LTEyLjI4IDEyLjI4LTMyLjE5IDAtNDQuNDhsLTIyLjI0LTIyLjI0Yy0xMi4yOC0xMi4yOC0zMi4xOS0xMi4yOC00NC40OCAwTDE3NiAxODkuMjggNzUuOTMgODkuMjFjLTEyLjI4LTEyLjI4LTMyLjE5LTEyLjI4LTQ0LjQ4IDBMOS4yMSAxMTEuNDVjLTEyLjI4IDEyLjI4LTEyLjI4IDMyLjE5IDAgNDQuNDhMMTA5LjI4IDI1NiA5LjIxIDM1Ni4wN2MtMTIuMjggMTIuMjgtMTIuMjggMzIuMTkgMCA0NC40OGwyMi4yNCAyMi4yNGMxMi4yOCAxMi4yOCAzMi4yIDEyLjI4IDQ0LjQ4IDBMMTc2IDMyMi43MmwxMDAuMDcgMTAwLjA3YzEyLjI4IDEyLjI4IDMyLjIgMTIuMjggNDQuNDggMGwyMi4yNC0yMi4yNGMxMi4yOC0xMi4yOCAxMi4yOC0zMi4xOSAwLTQ0LjQ4eiIvPjwvc3ZnPg==);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.rtx-icon.checkmark::before {
  content: "";
  width: 15px;
  height: 15px;
  display: inline-block;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJncmVlbiIgZD0iTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeiIvPjwvc3ZnPg==);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.rtx-icon.checkmark.white::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+);
}

.configrator-preview {
  position: relative;
}

.configrator-preview img {
  width: 100%;
}

img#omkasting {
  position: absolute;
  top: 0;
}

button#next-btn {
  margin-bottom: 0;
  padding: 14px 20px;
}

button.filler-profile-toggler {
  width: 100%;
  padding: 15px;
  margin: 10px 0 !important;
  border-radius: 8px;
  border: solid 2px #e6e6e6;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  color: #000;
  box-shadow: none;
}

button.filler-profile-toggler:before {
  content: "";
  border-radius: 5px;
  width: 25px;
  height: 25px;
  padding: 5px;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  border: 1px solid #e6e6e6;
}

button.filler-profile-toggler.active {
  background-color: #38b549;
  color: #fff;
  border-radius: 8px;
}

button.filler-profile-toggler.active:before {
  background-color: #38b549;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='check' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-9x'%3E%3Cpath fill='white' d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z' class=''%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
}

.rtx-conf-button-wrap {
  margin-top: 20px;
}

/* tab */

.rtx-steps-container {
  scrollbar-width: none;
  padding-bottom: 50px;
  padding-top: 40px;
  height: auto;
  overflow: hidden;
}

.rtx-tab-titles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: relative;
  margin: 0;
  z-index: 3;
  min-width: 500px;
  margin-bottom: -20px;
}

.rtx-tab-titles:before {
  content: "";
  width: 100%;
  border-top: 4px solid #f1f1f1;
  position: absolute;
}

.rtx-custom-tab-title {
  flex: 1;
  cursor: pointer;
  position: relative;
  text-align: center;
  color: #d2d2d2;
  padding: 20px 0;
  list-style: none;
}

.rtx-custom-tab-title:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: -10px;
  border-radius: 100%;
  background-color: #e6e6e6;
  z-index: 2;
}

.rtx-custom-tab-title.active {
  color: #000;
}

.rtx-custom-tab-title.active:before {
  background-color: green;
}

.rtx-custom-tab-title.complete:before {
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='check' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-9x'%3E%3Cpath fill='white' d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: green;
}

.rtx-custom-tab-title:after {
  content: "";
  transform: translate(-50%, 50%);
  width: 100%;
  height: 3px;
  left: 0;
  z-index: 1;
  background: #f1f1f1;
  top: -1px;
  position: absolute;
}

/* Disabled select options styling */
select#housing_size option:disabled {
  color: #999;
  text-decoration: line-through;
  font-style: italic;
}

/* Disabled color options styling */
.rtx-option.color.disabled {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.rtx-option.color.disabled .rtx-option-label {
  cursor: not-allowed;
  border-color: #ddd;
}

.rtx-option.color.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.5) 10px,
    rgba(255, 255, 255, 0.5) 20px
  );
  border-radius: 8px;
  pointer-events: none;
}

.rtx-option.color.disabled .rtx-option-indicator {
  background: #ddd;
  color: #999;
}

.rtx-option.image-disabled-by-admin {
  opacity: 0.5;
}

@media (max-width: 1080px) {
  .rtx-options.col-4 {
    gap: 20px;
  }

  .rtx-options.col-4 .rtx-option {
    width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .rtx-options.col-4 {
    gap: 10px;
  }

  .rtx-options.col-4 .rtx-option {
    width: calc(25% - 10px);
  }
}
@media (max-width: 600px) {
  .rtx-options.col-4 {
    gap: 20px;
  }

  .rtx-options.col-4 .rtx-option {
    width: calc(50% - 10px);
  }
}