@import url('../../commons/blocks/add-car-popup/add-car-popup.css');
.add-car-popup.block {
  .acp {
    dialog {
      clip-path: none;
      margin-left: 1.25rem;
      margin-right: 1.25rem;
      width: auto;
      max-width: unset;
      border: none;
      @media (width >= 1024px) {
        margin-left: 5.125rem;
        margin-right: 5.125rem;
      }
      &::backdrop {
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
      }
    }
    .close-button {
      top: 0.75rem;
      padding: 0;
      @media (width >= 1024px) {
        top: 1.5rem;
        right: 1.5rem;
      }
    }
    .modal-content {
      overscroll-behavior: auto;
      padding: var(--space-24px) var(--space-12px) 2.5rem;
      @media (width >= 1024px) {
        padding: 2.375rem 1.75rem;
      }
    }
    .modal-content:has(.acp_wrapper--added-cars) {
      padding: 2.75rem var(--space-12px) var(--space-24px);
      background: var(--secondary-gray-20);
      @media (width>= 1024px) {
        padding: 4rem var(--space-24px) 4.125rem;
        background: var(--secondary-gray-10);
      }
    }
    form {
      @media (width >= 1024px) {
        display: flex;
        flex-direction: row-reverse;
        gap: 6.688rem;
      }
    }
    .acp__image {
      display: none;
      padding: 0 var(--space-12px);
      margin-bottom: var(--space-24px);
      @media (width >= 768px) {
        display: block;
      }
      @media (width >= 1024px) {
        padding: 0;
        margin-bottom: 0;
        flex: 1;
      }
      img {
        width: 100%;
        @media (width >= 1024px) {
          max-width: 34.25rem;
          height: auto;
        }
      }
    }
    .acp_wrapper {
      @media (width >= 1024px) {
        flex: 1;
        padding-top: 1.625rem;
      }
    }
    .head_title {
      :is(h1, h2, h3, h4, h5, h6) {
        color: var(--secondary-black);
        font-size: var(--heading-font-15-mob-sub-heading);
        font-family: var(--body-font-arena);
        font-weight: var(--fw-700);
        line-height: normal;
        font-style: normal;
        letter-spacing: normal;
        margin-bottom: var(--space-24px);
        @media (width >= 1024px) {
          line-height: var(--heading-lh-9-des-sub-heading);
          margin-bottom: var(--space-32px);
        }
      }
    }
    .head_description {
      display: none;
    }
    .acp_body {
      margin-bottom: 1rem;

      @media (width >= 1024px) {
        margin-bottom: 1.25rem;
      }
      .body_fields {
        display: grid;
        margin-bottom: var(--space-24px);
        gap: 1.5rem;
        @media (width >= 768px) {
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
        }
        @media (width >= 1024px) {
          margin-bottom: 2.5rem;
        }
        .body_fields-container {
          margin-bottom: 1rem;
          .body_fields-select,
          .body_fields-input,
          .body_fields-input::placeholder {
            margin: 0;
            font-family: var(--body-font-arena);
            color: var(--primary-black);
            font-weight: var(--fw-600);
            line-height: normal;
            font-style: normal;
            font-size: var(--body-font-size-xxs);
            height: auto;
            align-items: center;
            @media (width >= 1024px) {
              font-size: var(--body-font-size-xs);
              line-height: var(--heading-lh-6-des);
              font-weight: var(--fw-700);
            }

            option {
              background-color: transparent;
            }
          }
          .body_fields-input::placeholder {
            color: var(--inactive-content);
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-5--mob);
            margin-bottom: var(--space-6px);
            padding-top: 0;
            @media (width >= 1024px) {
              font-weight: var(--fw-500);
              font-size: var(--body-font-size-xs);
              margin-bottom: var(--space-4px);
            }
          }
          .body_fields-helper {
            color: var(--inactive-content);
            font-family: var(--body-font-arena);
            line-height: var(--heading-lh-21-mob-text-small);
            padding: 0 var(--space-16px);
            font-weight: var(--fw-400);

            @media (width>=1024px) {
              font-size: var(--body-font-size-xxs);
              line-height: var(--heading-lh-6-des);
              font-weight: var(--fw-300);
              padding: 0;
            }
          }
        }
      }
    }
    .acp_foot {
      gap: 13px;
      @media (width >= 1024px) {
        justify-content: flex-start;
        margin-bottom: var(--space-28px);
        flex-direction: column;
        gap: 29px;
      }
      .foot_error,
      .foot_info {
        box-shadow: none;
        padding: var(--space-28px) var(--space-16px);
        @media (width >= 1024px) {
          padding: var(--space-8px) var(--space-16px);
          margin: 0;
          width: 100%;
        }
        P {
          font-family: var(--fw-500);
          font-size: var(--body-font-size-xxs);
          @media (width >= 1024px) {
            font-weight: var(--fw-400);
          }

          strong {
            font-weight: var(--fw-600);
          }
        }
      }
      .foot_btn--cancel {
        display: none;
      }
      .foot_btn--submit {
        line-height: var(--heading-lh-11-des-text-small);
        font-size: var(--body-font-size-xxs);
        color: var(--secondary-gray-20);
        height: auto;
        background-color: var(--primary-blue-700);
        &:disabled {
          opacity: 0.5;
        }

        @media (width >= 1024px) {
          font-size: var(--body-font-size-xxs);
          line-height: var(--heading-lh-11-des-text-small);
          padding: var(--space-12px) var(--space-24px);
          align-self: flex-start;
        }
      }
    }

    .acp_wrapper--added-cars {
      position: relative;
      @media (width >= 1024px) {
        padding-top: 0;
      }
      .acp_foot {
        @media (width >= 1024px) {
          margin-bottom: 0;
          position: absolute;
          top: 300px;
        }
      }
      .acp_head {
        position: absolute;
        bottom: 13rem;
        @media (width >= 1024px) {
          position: static;
          margin-bottom: var(--space-32px);
        }
      }
      .foot_btn--confirm {
        display: none;
      }
      .acp_body {
        display: flex;
        flex-direction: column;
        @media (width >= 1024px) {
          flex-wrap: wrap;
          flex-direction: row;
          column-gap: 50px;
        }
        .body_fields-container {
          @media (width >= 1024px) {
            max-height: 2.5rem;
          }
        }
        .body_fields-input {
          background: var(--secondary-gray-20);
          @media (width >= 1024px) {
            background: var(--secondary-gray-10);
          }
        }
        .body_fields {
          order: 2;
          @media (width >= 1024px) {
            order: 1;
            flex: 1 1 calc(37% - 50px);
            margin-bottom: 0;
          }
        }

        .fount_car-list {
          max-height: 200px;
          overflow-y: auto;
          overflow-x: hidden;
          margin-bottom: 4.375rem;
          @media (width >= 1024px) {
            order: 2;
            flex: 1 1 calc(63% - 50px);
            margin-bottom: 0;
            max-height: 330px;
          }

          .found_car {
            display: flex;
            flex-direction: row;
            padding: var(--space-8px);
            border: 1px solid var(--bars-unselected);
            background: var(--secondary-white);
            gap: 1rem;

            @media (width >= 1024px) {
              flex-direction: row-reverse;
              background: var(--secondary-gray-20);
              border: none;
              padding: 6.75rem var(--space-24px) 2.125rem;
              position: relative;
            }
            .found_car-block {
              background: var(--secondary-gray-50);
              padding: var(--space-8px) var(--space-14px);
              margin-bottom: 0;
              flex: 1;
              @media (width >= 1024px) {
                flex-direction: column-reverse;
                margin: 0;
                padding: 0;
              }
              .found_car-image {
                margin-bottom: var(--space-8px);
                @media (width >= 1024px) {
                  margin: 0;
                  flex: 1;
                }
                img {
                  height: 80px;
                  width: auto;
                  object-fit: cover;
                  @media (width >= 1024px) {
                    height: 150px;
                  }
                }
              }
              .found_car-details {
                color: var(--primary-black);
                font-family: var(--body-font-arena);
                font-weight: var(--fw-600);
                font-size: var(--body-font-size-xxs);
                font-style: normal;
                line-height: var(--heading-lh-19-mob-text-small);
                @media (width >= 1024px) {
                  position: absolute;
                  top: 1.5rem;
                  left: 1.5rem;
                }
                .found_car-model {
                  margin-bottom: 0;
                  @media (width >= 1024px) {
                    margin-bottom: var(--space-16px);
                  }
                }
                .found_car-number {
                  font-size: var(--body-font-size-xxxs);
                  font-weight: var(--fw-300);
                  line-height: var(--heading-lh-20-mob-text-small);
                }
              }
            }
          }
          .owner_data {
            display: flex;
            flex-direction: column;
            padding: 0 var(--space-8px);
            gap: 0.5rem;
            white-space: normal;
            overflow-wrap: break-word;
            min-width: 7.75rem;
            flex: 1;
            @media (width >= 1024px) {
              display: grid;
              grid-template-columns: 1fr 1fr;
              row-gap: 2rem;
              padding: 0;
            }
            .owner_detail {
              @media (width >= 1024px) {
                min-width: 6.25rem;
              }
              .owner_label {
                color: var(--primary-black);
                font-size: var(--body-font-size-xxxxs);
                font-style: normal;
                font-weight: var(--fw-300);
                line-height: var(--heading-lh-21-mob-text-small);
                margin-bottom: var(--space-2px);
                @media (width >= 1024px) {
                  font-size: var(--body-font-size-xxs);
                  line-height: var(--heading-lh-6-des);
                  margin-bottom: var(--space-8px);
                }
              }
              .owner_value {
                color: var(--primary-black);
                font-size: var(--body-font-size-xs);
                font-style: normal;
                font-weight: var(--fw-600);
                line-height: normal;
                @media (width >= 1024px) {
                  line-height: var(--heading-lh-6-des);
                }
              }
            }
            .owner_separator {
              display: none;
            }
          }
        }
      }
    }
    .body_fields-info {
      &::before {
        background-image: url('/icons/info_blue.svg');
      }
    }
  }
}