@use "sass:map";
@use "sass:list";
@import "./functions.scss";
$defaultValues: (
  --_flex-box: getListOfResponsive(flex, block),
  --_flex-direction: getListOfResponsive(row, column, column),
  --_width-400: getListOfResponsive(350px, 100%, 100%),
  --_gap: getListOfResponsive(32px, 48px, 32px),
);

[data-div-type="element"] {
  &[data-element-type="requestForQuote"] {
    margin: 0;
    // Reads the percentage the right resize handle writes, same as My Templates and
    // My Wishlist. Without it the handle drags a value nothing consumes.
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
      )
    );

    & > .wrapper {
      // Layout > Padding. The element declares it but nothing read it back — the rule
      // below was commented out and named a variable (`--_lt-pg`) that never existed.
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
    }
    // width: var(--_lt-wh);
    // height: var(--_lt-ht);
    // margin: var(--_lt-mn);
    // padding: var(--_lt-pg);
    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
    // width: 50%;
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    // width: var(
    //   --_sf-el-wh-st-mx,
    //   calc(
    //     1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
    //   )
    // );
    // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
    // height: var(--_ctm-lt-ht);
    // height: ;
    // height: auto;
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // --_aspect-ratio: calc(
    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
    // );

    // &[data-element-sub-child="true"] {
    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
    // }

    .quotes_wrapper {
      display: flex;
      flex-direction: column;
      gap: 24px;

      .quotes_header {
        width: 100%;
        display: flex;

        justify-content: space-between;
        align-items: center;
        .back_to_cart {
          color: var(--_thm-cs-tt-ls-as);
          &:hover {
            text-decoration: underline;
          }
        }
      }
      .quotes_body {
        @include prepareMediaQueries($defaultValues);
        display: flex;
        // display: var(--_flex-box, block);
        // align-items: center;
        flex-direction: var(--_flex-direction);
        gap: var(--_gap);
        justify-content: space-between;
        .empty_template {
          height: auto;
        }
        @media (max-width: 1024px) {
          .empty_template {
            margin-block: 24px;
          }
        }
      }

      .quote-items {
        flex: 2;
        .quote-item {
          // padding: 32px 0;
          display: flex;
          gap: 24px;
          &:not(:last-child) {
            border-bottom: 1px dotted var(--_thm-cs-be-se-3);
          }
          &:not(:last-child) {
            padding-bottom: 16px;
          }
          &:not(:first-child) {
            padding-top: 16px;
          }

          .quote-item__image {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 4px;
            background-color: #f0f0f0;
          }

          .quote-item__details {
            flex: 1;
            display: flex;
            flex-direction: column;
            .quote-item__header {
              margin-bottom: 16px;
              padding-bottom: 16px;
              display: flex;
              border-bottom: 1px dotted var(--_thm-cs-be-se-3);
              flex-direction: column;
              gap: 8px;

              .quote-item__title {
                // font-size: 16px;
                font-weight: 600;
                // color: #111;
              }

              .quote-item__meta {
                display: flex;
                gap: 8px;
                // font-size: 14px;
                font-weight: 400;
                // color: var(--_gray-500);
                span {
                  &:first-child {
                    padding-right: 8px;
                    border-right: 1px solid var(var(--_primary-300));
                  }
                }
              }
            }

            .quote-item__row {
              display: flex;
              gap: 16px;
              align-items: flex-start;

              .field {
                display: flex;
                flex-direction: column;
                font-size: 14px;
                &.price_column {
                  padding-right: 24px;
                }

                label {
                  margin-bottom: 6px;
                  font-weight: 500;
                  // font-size: 14px;
                  // color: #333;
                }

                .value {
                  // font-weight: 600;
                  // font-size: 16px;
                  // // color: #111;
                  font-weight: 600;
                  font-size: 16px;
                  height: 39px;
                  display: flex;
                  align-items: center;
                  span {
                    display: inline-flex;
                    justify-content: flex-start;
                  }
                }

                input {
                  height: 40px;
                  padding: 8px 12px;
                  font-size: 14px;
                  border: 1px solid var(--_thm-cs-be-se-3);
                  border-radius: 4px;
                  outline: none;
                  width: 130px;
                  transition:
                    background-color 0.2s,
                    color 0.2s,
                    border-color 0.2s,
                    box-shadow 0.2s;

                  &:focus {
                    outline: 2px solid var(--_gray-100);
                    border: 1px solid var(--_gray-300);
                  }
                }

                .input-with-prefix {
                  display: flex;
                  align-items: center;
                  gap: 4px;
                  border: 1px solid var(--_thm-cs-be-se-3);
                  border-radius: 4px;
                  overflow: hidden;
                  width: 130px;
                  height: 40px;
                  transition:
                    background-color 0.2s,
                    color 0.2s,
                    border-color 0.2s,
                    box-shadow 0.2s;
                  &:focus-within {
                    outline: 2px solid var(--_gray-100);
                    border: 1px solid var(--_gray-300);
                  }

                  span {
                    padding: 0 8px;
                    font-size: 15px;
                    color: var(--_gray-500);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }

                  input {
                    border: none;
                    width: 100%;
                    height: 100%;
                    padding-left: 6px;
                    &:focus {
                      box-shadow: none;
                      outline: none;
                    }
                  }
                }
              }
            }
            .quote-item__totals {
              display: flex;
              flex-direction: column;
              gap: 16px;
              text-align: right;
              margin-left: auto;
              min-width: 180px;

              .quote-total {
                display: flex;
                flex-direction: column;
                gap: 6px;

                > div {
                  display: flex;
                  justify-content: flex-end;
                  align-items: baseline;
                  gap: 4px;

                  .label {
                    // font-size: 14px;
                    // color: #444;
                  }

                  .amount {
                    font-size: 18px;
                    font-weight: 700;
                    // color: #111;
                  }
                }

                small {
                  font-size: 13px;
                  // color: #888;
                  margin-top: 4px;
                  text-align: right;
                  display: flex;
                  justify-content: end;
                }

                &.discounted {
                  .label {
                    color: #039855;
                  }

                  .amount {
                    color: #039855;
                  }
                }
              }
            }

            @media (min-width: 767px) and (max-width: 1023px) {
              .quote-item__row {
                flex-wrap: wrap;
                .field {
                  &.price_column {
                    width: 100%;
                  }
                }
              }
            }
            @media (max-width: 767px) {
              .quote-item__row {
                flex-wrap: wrap;
              }
              .quote-item__totals {
                margin-left: 0;
                .quote-total {
                  > div {
                    display: inline-flex;
                    justify-content: flex-start;
                  }
                  small {
                    display: inline-flex;
                    justify-content: flex-start;
                    span {
                      display: inline-flex;
                      justify-content: flex-start;
                    }
                  }
                }
              }
            }
          }
          @media (max-width: 767px) {
            .quote-item__details {
              .quote-item__header {
                .quote-item__meta {
                  flex-direction: column;
                }
              }
            }
          }
        }
      }

      .quote-summary {
        background: var(--_base-white);
        border: 1px solid var(--_thm-cs-be-se-3);
        border-radius: 4px;
        // width: 400px;
        width: var(--_width-400);
        overflow: hidden;
        height: fit-content;
        position: sticky;
        top: 10px;

        &__row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px dotted var(--_thm-cs-be-se-3);

          .label {
            font-size: 14px;
            font-weight: 400;
            // color: #666;
          }

          .value {
            // font-size: 14px;
            font-weight: 500;
            // color: #333;

            &.highlight {
              font-size: 14px;
              font-weight: 500;
              // color: #000;
            }
          }

          &--quoted {
            margin-bottom: 20px;
          }
          .label-quote {
            // font-size: 14px;
            font-weight: 400;
            // font-weight: 600;
          }
        }

        &__notes {
          width: 100%;
          height: 100px;
          padding: 12px;
          border: 1px solid var(--_thm-cs-be-se-3);
          border-radius: 4px;
          resize: none;
          font-size: 14px;
          font-family: inherit;
          margin-bottom: 20px;
          box-sizing: border-box;
          margin-top: 6px;
          transition:
            background-color 0.2s,
            color 0.2s,
            border-color 0.2s,
            box-shadow 0.2s;

          &::placeholder {
            color: #999;
          }

          &:focus {
            outline: 2px solid var(--_gray-100);
            border: 1px solid var(--_gray-300);
          }
        }

        &__button {
          width: 100%;
          padding: 12px;
          // background-color: var(--_primary-400);
          // color: var(--_base-white);
          // font-size: 16px;
          // font-weight: 600;
          // border: none;
          // border-radius: 4px;
          // cursor: pointer;
          transition: background-color 0.2s ease;

          &:hover {
            // background-color: var(--_primary-500);
          }
        }
        & > h3 {
          // font-size: 16px;
          font-weight: 700;
          // color: var(--_gray-900);
          background-color: #f5f5f5;
          padding: 12px;
          border-bottom: 1px solid var(--_thm-cs-be-se-3);
        }
        .quote-summary-body {
          padding: 0px 16px 16px 16px;
        }
      }
    }

    .quotes_address_section {
      .address_card {
        background: var(--_base-white);
        border: 1px solid var(--_thm-cs-be-se-3);
        border-radius: 4px;
        // width: 400px;
        width: var(--_width-400);
        overflow: hidden;
        height: fit-content;
        top: 10px;
        margin-bottom: 24px;

        & > h3 {
          // font-size: 16px;
          font-weight: 700;
          background-color: #f5f5f5;
          padding: 12px;
          border-bottom: 1px solid var(--_thm-cs-be-se-3);
        }

        &_body {
          padding: 16px;
          max-height: calc(100vh - 420px);
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        &_row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 12px;
          border-bottom: 1px dashed var(--_thm-cs-be-se-3);
        }

        &_text {
          // font-size: 16px;
          font-weight: 700;
          // width: 273px;
          // height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          // margin-top: 4px;
        }

        &_select {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          // color: var(--_primary-400);
          color: var(--_thm-cs-tt-ls-as);
          text-decoration: none;
          font-weight: 400;
          background: none;
          border: none;
          cursor: pointer;
          span {
            display: flex;
          }

          &:hover {
            text-decoration: underline;
          }
        }
        // &_divider {
        //   border: none;
        //   border-top: 1px dashed var(--_gray-300);
        //   margin: 16px 0;
        // }

        &_footer {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 16px;
        }

        &_shipping,
        &_quoted {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        &_label {
          font-size: 14px;
          // color: var(--_gray-700);
          font-weight: 500;
          margin-bottom: 6px;
        }

        &_value {
          font-size: 20px;
          font-weight: 700;
          // color: var(--_gray-900);
          height: 40px;
          display: flex;
          align-items: center;
        }

        &_input_box {
          display: flex;
          // align-items: center;
          border: 1px solid var(--_thm-cs-be-se-3);
          border-radius: 6px;
          padding: 8px 12px;
          width: 128px;
          height: 40px;
        }

        &_currency {
          margin-right: 6px;
          font-weight: 600;
          color: var(--_gray-700);
          display: flex;
        }

        &_input {
          border: none;
          outline: none;
          font-size: 16px;
          font-weight: 400;
          color: var(--_gray-900);
          width: 100%;
          background: transparent;
        }

        // --- Extra styles for address list ---
        &_list_item {
          display: flex;
          flex-direction: column;
          // align-items: flex-start;
          gap: 6px;
          padding-bottom: 16px;
          &:first-child {
            padding-top: 0px;
          }
          &:not(:last-child) {
            border-bottom: 1px dashed var(--_thm-cs-be-se-3);
            margin-bottom: 16px;
          }

          .address_card_row {
            width: 100%;
            margin-bottom: 0px;
          }
        }
        .contact_details {
          gap: 6px;
          display: flex;
          flex-direction: column;
          padding-bottom: 24px;
          margin-top: 12px;
          .contact_title {
            display: flex;
            gap: 12px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            .toggle_dropdown {
              display: inline-block;
              transition: transform 0.3s ease;
              svg {
                width: 18px;
                height: 18px;
              }
              &.open {
                transform: rotate(180deg);
              }
            }
          }
          .secondary_val {
            font-weight: 500;
          }
        }

        &_address {
          font-size: 14px;
          // color: var(--_gray-500);
          font-weight: 400;
          line-height: 20px;
          padding-bottom: 12x;
        }
        &_details {
          display: flex;
          align-items: center;
          gap: 10px;
          // color: var(--_gray-900);
          font-size: 14px;
          cursor: pointer;
          .toggle_arrow {
            display: flex;
            transition: transform 0.3s ease;
            &.open {
              transform: rotate(180deg);
            }
          }
          &.no_caret {
            caret-color: transparent; /* hides the blinking cursor */
            pointer-events: none; /* prevents clicking/focus */
          }
        }

        &_contact_container {
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
        }
        &_contact {
          font-size: 14px;
          font-weight: 600;
          color: var(--_gray-900);
        }
        &_shipping_details {
          padding-bottom: 16px;
          margin-bottom: 16px;
          border-bottom: 1px dashed var(--_thm-cs-be-se-3);
          // padding: 16px;
          // margin-top: 10px;

          .no_shipping_methods {
            background: var(--_gray-100);
            border-radius: 4px;
            padding: 16px;
            text-align: center;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-size: 16px;
              font-weight: 600;
              color: var(--_gray-700);
            }
          }
        }

        &_shipping_heading {
          font-size: 14px;
          font-weight: 600;
          // color: var(--_gray-900);
          background: #f5f5f5;
          padding: 6px;
          border-radius: 4px;
          margin-bottom: 12px;
          padding-left: 12px;
        }

        &_shipping_group {
          margin-bottom: 16px;
          gap: 6px;
          display: flex;
          flex-direction: column;
        }

        &_shipping_subheading {
          font-size: 14px;
          font-weight: 700;
          // color: var(--_gray-900);
          // margin-bottom: 2px;
        }

        &_shipping_option {
          display: flex;
          align-items: center;
          // justify-content: space-between;
          // padding: 10px 8px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 14px;
          // color: var(--_gray-700);
          // margin-bottom: 8px;
          transition: background 0.2s ease;

          input[type="radio"] {
            accent-color: var(--_primary-400);
            margin-right: 12px;
            width: fit-content;
          }

          &:hover {
            // background: var(--_gray-100);
          }
        }

        &_shipping_label {
          // flex: 1;
          // margin-left: 6px;
          font-weight: 400;
          font-size: 14px;
          // color: var(--_gray-500);
        }

        &_shipping_price {
          font-weight: 600;
          // color: var(--_gray-900);
          font-size: 14px;
        }
        &_shipping_selected_method {
          display: flex;
          justify-content: space-between;
          gap: 48px;
        }
        &_shipping_title {
          font-size: 14px;
          font-weight: 600;
        }

        &_shipping_confirm {
          padding: 12px;
        }
        &_shipping_method {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .confirm_button {
          padding: 12px 24px;
          border-radius: 4px;
          font-weight: 600;
          background-color: var(--_thm-py-bs-dt-se-bd-cr);
          color: var(--_thm-py-bs-dt-se-tt-cr);
          margin-block: 4px 4px;
          &:hover {
            background-color: var(--_thm-py-bs-hr-se-bd-cr);
            color: var(--_thm-py-bs-hr-se-tt-cr);
          }
        }
      }
      .cpn__checkmark__icon {
        display: flex;
        svg path {
          // stroke: var(--_thm-cs-tt-ls-as);
        }
      }
    }

    width: 100%;

    & > .wrapper {
      // width: 100%;
      // height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    // .accordion-element {
    //   background-color: var(
    //     --_ctm-mob-dn-fq-wt-bd-cr,
    //     var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
    //   );
    //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
    //   display: flex;
    //   flex-direction: column;
    //   --_sf-gp: var(
    //     --_ctm-mob-lt-im-sg,
    //     var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
    //   );
    //   --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
    //   row-gap: var(--_sf-gp);
    //   width: 100%;
    //   // height: 100%;
    //   border-color: var(
    //     --_ctm-mob-dn-fq-wt-br-cr,
    //     var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
    //   );
    //   border-style: var(
    //     --_ctm-mob-dn-fq-wt-br-se,
    //     var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
    //   );
    //   border-width: var(
    //     --_ctm-mob-dn-fq-wt-br-wh,
    //     var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
    //   );
    //   border-radius: var(
    //     --_ctm-mob-dn-fq-wt-br-rs,
    //     var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
    //   );
    //   box-shadow: var(
    //     --_show-shadow,
    //     var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
    //       var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
    //       var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
    //       var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
    //   );
    // }
  }
}