@charset "UTF-8";

.estimate-modal {
  padding: var(--sp-spacing-40) var(--sp-spacing-32) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none
}

@media (min-width: 961px) {
  .estimate-modal {
    padding: var(--sp-spacing-40) var(--sp-spacing-64) 0
  }
}

.estimate-modal::-webkit-scrollbar {
  display: none
}

.estimate-modal__head {
  padding-bottom: var(--sp-spacing-16);
  font-size: 24px;
  line-height: 150%;
  font-weight: 400;
  font-weight: 600
}

.estimate-modal__inner {
  padding-bottom: var(--sp-spacing-40);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--sp-spacing-24)
}

.estimate-modal__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--sp-spacing-16)
}

@media (min-width: 961px) {
  .estimate-modal__details {
    display: grid;
    grid-template-columns: 140px 244px
  }
}

.estimate-modal__details-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: var(--rd-radius-Lv1);
  overflow: hidden
}

.estimate-modal__details-image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.estimate-modal__details-info {
  display: grid;
  grid-template-rows: auto 42px auto auto
}

.estimate-modal__product {
  font-size: 14px;
  line-height: 150%;
  font-weight: 400;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal
}

.estimate-modal__id {
  padding-top: var(--sp-spacing-8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--sp-spacing-4);
  font-size: 10px;
  line-height: 150%;
  font-weight: 400;
  color: var(--clr-text-sub)
}

.estimate-modal__id-number {
  color: var(--clr-text-black)
}

.estimate-modal__price-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--sp-spacing-4)
}

.estimate-form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--sp-spacing-24)
}

.estimate-form__head-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--sp-spacing-2)
}

.estimate-form__head {
  font-size: 18px;
  line-height: 150%;
  font-weight: 400;
  font-weight: 600
}

.estimate-form__read {
  font-size: 14px;
  line-height: 150%;
  font-weight: 400
}

.estimate-form__list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--sp-spacing-16)
}

.estimate-form__submit-button {
  width: calc(100% + var(--sp-spacing-32) * 2);
  margin: 0 calc(-1 * var(--sp-spacing-32));
  padding: var(--sp-spacing-16) var(--sp-spacing-32);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: sticky;
  bottom: 0;
  background: #fffc
}

@media (min-width: 961px) {
  .estimate-form__submit-button {
    width: calc(100% + var(--sp-spacing-64) * 2);
    margin: 0 calc(-1 * var(--sp-spacing-64));
    padding: var(--sp-spacing-16) var(--sp-spacing-64)
  }
}

.estimate-form__submit-button .button {
  max-width: 320px
}