/* declare custom properties */
:root {
  --rdv-border-radius: 6px;
  --rdv-grid-gap: 20px;
  --rdv-border-width: 3px;
  --rdv-product-width: 200px;
  --rdv-product-height: 150px;
  --rdv-control-height: 64px;
  --rdv-control-width: 64px;
  --rdv-control-bg-color: rgba(255, 255, 255, 0.5);
  --rdv-control-icon-color: #838383;
  --rdv-control-icon-border-color: #ddd;
  --rdv-control-icon-border-width: 2px;
  --rdv-control-icon-thickness: 9%;
}
/* hide product images whose category is not selected */
.frm-fluent-form .ff-el-image-holder {
  display: none !important;
}
.frm-fluent-form .ff-el-image-holder[data-is-active="yes"] {
  display: inline-block !important;
}

/*
  product holder layout styles
  number of rows are controlled by adding a class to the field container
  in Fluent Forms.
  Choices are: rows-2, rows-3.
  No class defaults to single row.
  */
.frm-fluent-form .ff_list_buttons .ff-el-input--content {
  width: 100%;
  overflow: auto !important;
}
.frm-fluent-form .ff_list_buttons .ff_el_checkable_photo_holders {
  display: grid;
  gap: var(--rdv-grid-gap, 20px);
  width: max-content;
  margin-bottom: 0;
}
.frm-fluent-form .ff_list_buttons .ff_el_checkable_photo_holders .ff-el-image-holder {
  grid-row: span 1;
}
.frm-fluent-form .ff_list_buttons .ff_el_checkable_photo_holders .ff-el-image-holder {
  grid-row: 1;
}
.frm-fluent-form .ff_list_buttons.rows-2 .ff_el_checkable_photo_holders .ff-el-image-holder:nth-child(odd) {
  grid-row: 2;
}
.frm-fluent-form .ff_list_buttons.rows-2 .ff_el_checkable_photo_holders .ff-el-image-holder:nth-child(even) {
  grid-row: 1;
}
.frm-fluent-form .ff_list_buttons.rows-3 .ff_el_checkable_photo_holders .ff-el-image-holder {
  grid-row: 3;
}
.frm-fluent-form .ff_list_buttons.rows-3 .ff_el_checkable_photo_holders .ff-el-image-holder:nth-child(3n-2) {
  grid-row: 2;
}
.frm-fluent-form .ff_list_buttons.rows-3 .ff_el_checkable_photo_holders .ff-el-image-holder:nth-child(3n) {
  grid-row: 1;
}

.frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder {
  margin: 0;
}

/* style the radio label (the product name) */
.frm-fluent-form .ff_list_buttons .ff_el_checkable_photo_holders .ff-el-image-holder .ff-el-form-check-label {
  width: 100%;
}

/* style the image container labels */
.frm-fluent-form .ff-el-image-holder label.ff-el-image-input-src {
  height: var(--rdv-product-height, 150px);
  width: var(--rdv-product-width, 200px);
  border-color: transparent;
  outline-color: transparent;
}

.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder {
  transition: border-color 0.3s;
  border: var(--rdv-border-radius, 3px) solid transparent;
  border-radius: var(--rdv-border-radius, 6px);
  border-color: transparent;
  outline-color: transparent;
}

.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder.ff_item_selected {
  border-color: var(--color-secondary);
}

/* hide image inputs until they are loaded */
.ff-el-image-input-src {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

/* add scroll controls to product selector */
.frm-fluent-form .ff_list_buttons {
  position: relative;
}

.frm-fluent-form .ff_list_buttons .rdv-selector-control {
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  transform: translateY(-50%);
  height: var(--rdv-control-height, 64px);
  width: var(--rdv-control-width, 64px);
  max-height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  
  opacity: 0;
  pointer-events: none;

  background-color: var(--rdv-control-bg-color, #fff);
}
.frm-fluent-form .ff_list_buttons .rdv-selector-control.rdv-selector-prev {
  left: calc(var(--rdv-control-width, 64px) * -0.6);
}
.frm-fluent-form .ff_list_buttons .rdv-selector-control.rdv-selector-next {
  right: calc(var(--rdv-control-width, 64px) * -0.6);
}

/* show controls when active */
.frm-fluent-form .ff_list_buttons .rdv-selector-control[data-is-active="yes"] {
  transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out;
  opacity: 1;
  pointer-events: auto;
}

.frm-fluent-form .ff_list_buttons .rdv-selector-control[data-is-active="yes"]:active {
  opacity: 0.3;
}

/* style the controls */
.rdv-selector-control {
  position: relative;
  outline: 0;
  box-shadow: none;
  border: var(--rdv-control-icon-border-width) solid var(--rdv-control-icon-border-color, #ddd);
  border-radius: var(--rdv-border-radius, 6px);
}

.selector-control::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;

    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M7.94 13.06a1.5 1.5 0 0 1 0-2.12l5.656-5.658a1.5 1.5 0 1 1 2.121 2.122L11.122 12l4.596 4.596a1.5 1.5 0 1 1-2.12 2.122l-5.66-5.658Z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: var(--rdv-control-icon-color, #838383);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.rdv-selector-control.rdv-selector-next::before {
  transform: rotate(180deg);
}

.rdv-selector-control:hover {
}

.rdv-selector-control:focus {
  /* border-color: var(--color-secondary); */
}
/* hide scrollbar on non-touch devices */
/* WebKit browsers (Chrome, Safari) */
.frm-fluent-form .ff_list_buttons .ff-el-input--content.no-touch::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
/* Firefox */
.frm-fluent-form .ff_list_buttons .ff-el-input--content.no-touch { scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}