@use "sass:map";
@use "sass:list";
@use "./fb-dropdown.scss";
@use "./phone-input.scss";
/**************************************************************
 * Preview Form Styles
 **************************************************************/

.new-form-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  // height: 100%;
  width: 100%;
  text-align: center;
  background-color: var(
    --_ctm-mob-dn-fm-cr-bd-cr,
    var(--_ctm-tab-dn-fm-cr-bd-cr, var(--_ctm-dn-fm-cr-bd-cr))
  );
  border-color: var(
    --_ctm-mob-dn-fm-cr-br-cr,
    var(--_ctm-tab-dn-fm-cr-br-cr, var(--_ctm-dn-fm-cr-br-cr))
  );
  border-style: var(
    --_ctm-mob-dn-fm-cr-br-se,
    var(--_ctm-tab-dn-fm-cr-br-se, var(--_ctm-dn-fm-cr-br-se))
  );
  border-width: var(
    --_ctm-mob-dn-fm-cr-br-wh,
    var(--_ctm-tab-dn-fm-cr-br-wh, var(--_ctm-dn-fm-cr-br-wh))
  );
  border-radius: var(
    --_ctm-mob-dn-fm-cr-br-rs,
    var(--_ctm-tab-dn-fm-cr-br-rs, var(--_ctm-dn-fm-cr-br-rs))
  );
  box-shadow: var(
      --_ctm-mob-dn-fm-cr-sw-ae,
      var(--_ctm-tab-dn-fm-cr-sw-ae, var(--_ctm-dn-fm-cr-sw-ae))
    )
    var(--_ctm-mob-dn-fm-cr-sw-br, var(--_ctm-tab-dn-fm-cr-sw-br, var(--_ctm-dn-fm-cr-sw-br)))
    var(--_ctm-mob-dn-fm-cr-sw-sd, var(--_ctm-tab-dn-fm-cr-sw-sd, var(--_ctm-dn-fm-cr-sw-sd)))
    var(--_ctm-mob-dn-fm-cr-sw-cr, var(--_ctm-tab-dn-fm-cr-sw-cr, var(--_ctm-dn-fm-cr-sw-cr)));

  .icon-container {
    margin-bottom: 10px;

    svg {
      width: 50px;
      height: 50px;
      color: #666;
    }
  }

  .title {
    font-size: 1.2em;
    color: #8b4513;
    margin-bottom: 10px;
  }

  .description {
    word-break: break-word;
    font-size: 0.9em;
    color: #777;
    line-height: 1.4;
  }
  .spinner {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

.react-datepicker__input-container:has(.datepicker-input) {
  border: 0px;
}

.fb_field {
  width: 100%;
  .cnf_checkbox {
    display: flex;
    gap: 8px;
  }

  .input__error {
    border: 1px solid var(--_error-300) !important;

    &:focus {
      outline: 2px solid var(--_error-100) !important;
    }

    box-shadow: 0px 0px 0px 2px var(--_error-100);
  }

  .error_styles {
    span {
      svg {
        width: 14px;
        height: 14px;
        path {
          stroke: var(--_error-500);
        }
      }
    }
  }

  .toggle_input {
    display: flex;
    svg {
      width: 18px;
      height: 18px;
    }
  }
  .editor {
    padding-inline: 0px !important;
    .fr-toolbar.fr-top {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
    .fr-second-toolbar {
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }

  .date_picker_container {
    position: relative;

    .svg_icon {
      position: absolute;
      left: 8px;
      top: 9px;
      z-index: 1;
      display: flex;
    }

    .react-datepicker-wrapper {
      display: block;

      // &:has(.react-datepicker__input-container) {
      //   input {
      //     border: 0;
      //     padding-inline: 24px 16px;
      //   }
      // }

      // .react-datepicker__input-container {
      //   input {
      //     padding-left: 32px !important;
      //   }
      // }
    }
  }

  .react-datepicker-wrapper {
    display: block;
    .react-datepicker__input-container {
      .datepicker-input {
        padding-inline: 32px 12px;
      }
    }
  }

  .react-datepicker__header {
    select {
      appearance: none; /* remove default arrow */
      -webkit-appearance: none;
      -moz-appearance: none;

      padding: 8px 35px 8px 10px !important; /* extra right space */

      background: url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 20 20' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>")
        no-repeat right 10px center;

      background-color: var(--_base-white);
      border: 1px solid var(--_gray-300);
      outline: none;
    }
    /* Scrollbar width */
    select::-webkit-scrollbar {
      width: 6px;
    }

    /* Scroll thumb (the draggable part) */
    select::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 4px;
    }

    /* Scroll track */
    select::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  input:not([type="checkbox"][type="radio"]) {
    border: 1px solid var(--_gray-300);
    border-radius: 6px;
    padding-inline: 12px;
    width: 100%;
    height: 38px;
    outline: none;

    &:focus {
      box-shadow: 0px 0px 0px 2px var(--_gray-100);
    }
  }
  input[type="tel"] {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-left: 0 !important;
    background-color: var(--_base-white);
    height: 38px;
  }
  textarea {
    width: 100%;
    resize: vertical;
    border-radius: 6px;
    background-color: var(--_base-white);
    border: 1px solid var(--_gray-300);
    padding: 12px;
    &:focus {
      box-shadow: 0px 0px 0px 2px var(--_gray-100);
      outline: none;
    }
  }
  .error_styles {
    min-height: 20px;
    line-height: 150% !important;
    span {
      display: flex;
      align-items: center;
    }
  }
  .label_with_radio {
    display: flex;
    align-items: center;
    gap: 4px;
    label {
      margin-right: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      text-wrap: nowrap;
    }
  }

  .custom-input {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    flex-wrap: wrap;

    input {
      display: none;
    }

    .custom-mark {
      width: 20px;
      height: 20px;
      background-color: var(--_base-white);
      border: 2px solid var(--_gray-400);
      margin: 0px 4px;
      position: relative;
      transition: all 0.2s ease;

      &::after {
        content: "";
        position: absolute;
        opacity: 0;
        transition: opacity 0.2s ease;
      }
    }

    &.checkbox {
      .custom-mark {
        border-radius: 4px;

        &::after {
          left: 6px;
          top: 2px;
          width: 5px;
          height: 10px;
          border: solid #fff;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
        }
      }

      input:checked + .custom-mark {
        background-color: var(--_primary-400);
        border-color: var(--_primary-400);

        &::after {
          opacity: 1;
        }
      }
    }

    &.radio {
      .custom-mark {
        border-radius: 50%;

        &::after {
          top: 50%;
          left: 50%;
          width: 10px;
          height: 10px;
          background-color: var(--_base-white);
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
      }

      input:checked + .custom-mark {
        background-color: var(--_primary-400);
        border-color: var(--_primary-400);

        &::after {
          opacity: 1;
        }
      }
    }
  }
  .label_styles {
    display: block;
    margin-bottom: 4px;
  }
  &:has(input[type="checkbox"]) {
    display: flex;
    flex-direction: column;
    // align-items: center;
    // gap: 8px;
  }
  input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
  }
}
.fb_file_upload {
  label {
    display: block;
    margin-bottom: 6px;
    &:hover {
      background-color: var(--_gray-25);
    }
  }
}
.fb_btn {
  height: 40px;
  text-align: center;
  border-radius: 6px;
  background-color: var(--_thm-py-bs-dt-se-bd-cr);
  font-size: var(--_thm-py-bs-dt-se-ft-se);
  font-weight: var(--_thm-py-bs-dt-se-bd);
  font-family: var(--_thm-py-bs-dt-se-ft);
  color: var(--_base-white);
  width: 100%;
  padding-inline: 16px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;

  &:disabled,
  &[disabled] {
    background-color: var(--_thm-py-bs-dt-se-bd-cr);
    color: var(--_base-white);
    cursor: not-allowed;
    opacity: 0.6;
  }
  &:hover {
    background-color: var(--_thm-py-bs-hr-se-bd-cr);
  }
}

// react datepicker styles in preview mode
.react-datepicker-popper {
  z-index: 9999 !important;
  border: 1px solid var(--_gray-300);
  border-radius: 6px;
}

.react-grid-item:has(.react-datepicker-popper) {
  z-index: 2 !important;
}

.react-grid-item:has(.sc-phone-dropdown) {
  z-index: 2 !important;
}

// .react-datepicker__day--selected {
//   background-color: var(--_gray-500);
// }

// .react-datepicker__day--selected:not([aria-disabled="true"]):hover {
//   background-color: var(--_gray-600) !important;
// }

// .react-datepicker__month {
//   background-color: var(--_base-white);
//   margin: 0px;
//   // border: 1px solid var(--_gray-200);
//   border-top: 0;
//   margin: 0px !important;
// }

// .react-datepicker__day-names {
//   padding-top: 5px;
// }

// .react-datepicker-wrapper {
//   .react-datepicker__input-container {
//     background-color: var(--_base-white);
//     border: 1px solid var(--_gray-300);
//     border-radius: 6px;
//     padding-inline: 12px;
//     &:focus-within {
//       border: 1px solid var(--_primary-300);
//       box-shadow:
//         var(--_shadow-xs),
//         0px 0px 0px 2px var(--_primary-50);
//     }
//   }
// }

.react-datepicker__tab-loop {
  .fb_field select::-webkit-scrollbar {
    width: 6px;
  }

  .react-datepicker__day--keyboard-selected {
    background-color: var(--_thm-cs-at-py);
    color: var(--_base-white);
    &:hover {
      background-color: var(--_thm-cs-at-py) !important;
    }
  }
  .react-datepicker__day-names {
    font-size: 14px;
  }
  .react-datepicker__week {
    font-size: 12px;
  }
  .react-datepicker {
    border: 1px solid var(--_gray-300);
  }
  &:has(.react-datepicker__time-list) {
    .react-datepicker__month-container .react-datepicker__month {
      border: 1px solid var(--_gray-300);
    }
  }
  .react-datepicker__month-container .react-datepicker__month {
    border: 0;
    border-radius: 6px;
  }
  .react-datepicker__time-container {
    border-left: 1px solid var(--_gray-300);
  }
  .react-datepicker__header {
    background-color: var(--_gray-50);
    border-bottom: 1px solid var(--_gray-300);
  }
  .react-datepicker__time-list {
    padding-right: 2px;
  }

  .react-datepicker__tab-loop .react-datepicker__triangle path {
    stroke: var(--_gray-100);
  }
  .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
    fill: var(--_gray-50) !important;
    color: var(--_gray-50) !important;
  }
  // .react-datepicker-popper[data-placement^="bottom"],
  // .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
  //   fill: var(--_gray-50) !important;
  //   color: var(--_gray-50) !important;
  //   stroke: var(--_gray-300) !important;
  // }
  .react-datepicker-popper .react-datepicker__triangle {
    stroke: var(--_gray-300);
  }
}

// react datepicker styles in preview mode
.react-datepicker-popper {
  z-index: 9999 !important;
}

.react-grid-item:has(.react-datepicker-popper) {
  z-index: 2 !important;
}

.react-grid-item:has(.sc-phone-dropdown) {
  z-index: 2 !important;
}

.react-datepicker__day--selected {
  background-color: var(--_thm-py-bs-dt-se-bd-cr) !important;
}

.react-datepicker__day--selected:not([aria-disabled="true"]):hover {
  background-color: var(--_gray-600) !important;
}

.react-datepicker__month {
  background-color: var(--_base-white);
  margin: 0px;
  // border: 1px solid var(--_gray-200);
  border-top: 0;
  margin: 0px !important;
}

.react-datepicker__day-names {
  padding-top: 5px;
}