.payment {
  background-color: #FAF7EE;
}

.payment-header {
  padding: 2.5em 0 0;
}
@media (max-width: 1024px) {
  .payment-header {
    padding: 1.625em 0 0;
  }
}
.payment-header__breadcrumbs-url:only-child {
  color: #004D47;
  margin: 0;
}

@media (max-width: 1024px) {
  .payment-body {
    margin: 1.5em 0 0;
    padding: 0 0 1.75em;
  }
}
@media (max-width: 767px) {
  .payment-body {
    padding: 0 0 0.75em;
  }
}
.payment-body__container {
  display: flex;
  gap: 1.5em;
}
@media (max-width: 1024px) {
  .payment-body__container {
    flex-direction: column-reverse;
  }
}
.payment-body__main {
  width: 57.5%;
  padding: 1.5em 0 3.25em;
}
@media (max-width: 1024px) {
  .payment-body__main {
    width: 100%;
    padding: 0;
  }
}
.payment-body__aside {
  position: sticky;
  height: max-content;
  top: 6.25em;
  flex: 1;
  padding: 1.5em 0 3.25em;
}
@media (max-width: 1289px) {
  .payment-body__aside {
    top: 6.0875em;
  }
}
@media (max-width: 1024px) {
  .payment-body__aside {
    position: relative;
    top: 0;
    max-width: 100%;
    padding: 0;
  }
}
.payment-body__summary {
  padding: 1.5em;
  border-radius: 0.5em;
  background-color: #FFFFFF;
}
@media (max-width: 767px) {
  .payment-body__summary {
    padding: 1em;
  }
}
.payment-body__summary-header {
  padding: 0 0 1.3125em;
  border-bottom: 1px solid #E9E2D2;
}
@media (max-width: 1024px) {
  .payment-body__summary-header {
    padding: 0 0 0.75em;
  }
}
@media (max-width: 767px) {
  .payment-body__summary-header {
    padding: 0 0 0.5em;
  }
}
.payment-body__summary-body {
  padding: 1.8125em 0 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .payment-body__summary-body {
    padding: 1.375em 0 0;
  }
}
@media (max-width: 767px) {
  .payment-body__summary-body {
    padding: 1.25em 0 0;
  }
}
.payment-body__summary-title {
  font-family: "Playfair Display", sans-serif;
  font-size: 1.25em;
  line-height: 1.6;
  color: #004D47;
  text-align: center;
}
.payment-body__summary-card, .payment-body__summary-custom-card {
  width: 87.67%;
  margin: 0 auto;
  aspect-ratio: 3.84/2.26;
  position: relative;
}
@media (max-width: 1024px) {
  .payment-body__summary-card, .payment-body__summary-custom-card {
    width: 24em;
  }
}
@media (max-width: 767px) {
  .payment-body__summary-card, .payment-body__summary-custom-card {
    width: 100%;
    max-width: 20em;
  }
}
.payment-body__summary-card:not(:first-child), .payment-body__summary-custom-card:not(:first-child) {
  margin: 1.5em auto 0;
}
.payment-body__summary-custom-card {
  background-color: #F9F9F9;
  border-radius: 0.75em;
  overflow: hidden;
}
.payment-body__summary-card-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
.payment-body__summary-btn {
  width: 100%;
  margin: 1.125em 0 0;
  gap: 0;
}
@media (max-width: 1024px) {
  .payment-body__summary-btn {
    margin: 1.5em 0 0;
  }
}
@media (max-width: 1024px) {
  .payment-body__summary-btn_desktop {
    display: none;
  }
}
.payment-body__summary-btn_mobile {
  display: none;
}
@media (max-width: 1024px) {
  .payment-body__summary-btn_mobile {
    display: flex;
  }
}
.payment-body__title {
  margin: 0.45em 0 0;
}
.payment-body__default-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.1875em 0 0;
}
.payment-body__default-card-title {
  font-weight: 700;
  color: #191A1D;
}
.payment-body__default-card-edit {
  color: #BA874C;
  cursor: pointer;
  transition: color 0.25s;
}
.payment-body__default-card-edit:hover {
  color: #DAA464;
}
.payment-body__payment-method-balance {
  width: 100%;
  margin: 1.625em 0 0;
  border-radius: 0.875em;
  padding-top: 0.875em;
  padding-bottom: 0.875em;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
.payment-body__payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1.5em 0 0;
  padding: 0 0 1.4375em;
  border-bottom: 1px solid #E9E2D2;
}
.payment-body__payment-method {
  flex: 0 0 calc(50% - 0.5em);
  border-radius: 0.875em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  min-height: 3.125em;
}
.payment-body__payment-method_credit {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
@media (max-width: 767px) {
  .payment-body__payment-method-text_desktop {
    display: none;
  }
}
.payment-body__payment-method-text_mobile {
  display: none;
}
@media (max-width: 767px) {
  .payment-body__payment-method-text_mobile {
    display: inline;
  }
}
.payment-body__checkbox {
  margin: 2.0625em 0 0;
}
.payment-body__spoiler {
  font-size: 0.875em;
  line-height: 1.7143;
  color: #373A3F;
  margin: 1.75em 0 0;
}
@media (max-width: 767px) {
  .payment-body__spoiler {
    margin: 1.25em 0 0;
  }
}
.payment-body__summary-card-sum {
  font-family: "Taviraj", sans-serif;
  font-weight: 500;
  font-size: 3em;
  line-height: 1.2;
  color: #EFB666;
  position: absolute;
  top: 8.5%;
  left: 8%;
}
@media (max-width: 767px) {
  .payment-body__summary-card-sum {
    font-size: 2.5em;
  }
}
.payment-body__summary-total {
  margin: 1.25em 0 0;
}
@media (max-width: 1024px) {
  .payment-body__summary-total {
    margin: 1.8125em 0 0;
  }
}
.payment-body__summary-promotion {
  display: flex;
  align-items: flex-end;
  gap: 0.625em;
}
.payment-body__summary-promotion + .payment-body__summary-line {
  margin: 1em 0 0;
}
.payment-body__summary-promotion-input {
  flex: 1;
}
.payment-body__summary-line {
  display: flex;
  justify-content: space-between;
  color: #373A3F;
}
.payment-body__summary-line + .payment-body__summary-line {
  margin: 0.625em 0 0;
}
.payment-body__summary-total-line {
  display: flex;
  justify-content: space-between;
  color: #373A3F;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.46;
  margin: 1em 0 0;
}
.payment-body__summary-subtotal {
  padding: 1.625em 0 0.625em;
  border-top: 1px solid #E9E2D2;
  border-bottom: 1px solid #E9E2D2;
}

.payment-accordion__item {
  background-color: #FFFFFF;
  border-radius: 0.5em;
}
.payment-accordion__item + .payment-accordion__item {
  margin: 0.5em 0 0;
}
.payment-accordion__item-header {
  padding: 1.5em 1.5em 1em;
  cursor: pointer;
}
.payment-accordion__item-header-inner {
  display: flex;
  align-items: center;
  gap: 0.625em;
  border-bottom: 1px solid transparent;
  padding: 0 0 0.4375em;
}
.payment-accordion__item-header_active .payment-accordion__item-header-inner {
  border-color: #F2EDE0;
}
.payment-accordion__item-icon {
  width: 1.75em;
  color: #555960;
  transition: color 0.25s;
}
.payment-accordion__item-header_completed .payment-accordion__item-icon {
  color: #DAA464;
}
.payment-accordion__item-header_completed.payment-accordion__item-header_active .payment-accordion__item-icon {
  color: #555960;
}
.payment-accordion__item-title {
  flex: 1;
  font-size: 1.375em;
  line-height: 1.55;
  color: #373A3F;
  font-weight: 500;
}
.payment-accordion__item-body-content {
  padding: 0.5em 1.5em 1.5em;
  display: flex;
  flex-direction: column;
}

.payment-success__gift-icon {
  width: 4em;
}
.payment-success__title {
  font-size: 3.125em;
  line-height: 1.12;
  color: #719B50;
  margin: 0.32em 0 0;
}
.payment-success__description {
  font-size: 1.25em;
  line-height: 1.4;
  color: #373A3F;
  margin: 0.75em 0 0;
  max-width: 12.3em;
  text-align: center;
}
.payment-success__gift-img {
  max-width: 8.625em;
  margin: 3.375em 0 2.25em;
}
.payment-success .layout-modal__content {
  max-width: 31.25em;
  padding: 1.5em 0 0.75em;
}
.payment-success .layout-modal__header {
  padding: 0 1.5em;
}
.payment-success .layout-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5em 1.5em 1.25em;
}
.payment-success .layout-button {
  min-width: 20.4375em;
  margin: 1.875em 0 0;
}
.payment-success .layout-button + .layout-button {
  margin: 1em 0 0;
}