/* Keep payment choices compact and place the secondary actions on one calm row. */
@media (max-width: 600px) {
  .checkout-v2 .checkout-payment-dropin {
    padding: 10px;
    border: 1px solid #36393c;
    border-radius: 14px;
    background: linear-gradient(145deg, #151719, #101112);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  }

  .checkout-v2 .checkout-payment-actions {
    justify-content: flex-start;
    gap: 5px 16px;
    margin-top: 11px;
  }

  .checkout-v2 .checkout-payment-actions > #payment-check,
  .checkout-v2 .checkout-payment-actions > #payment-contact,
  .checkout-v2 .checkout-payment-actions > [data-back-step="3"] {
    min-height: 34px;
    margin: 0;
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #c5c7c9;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: underline;
    text-decoration-color: #777b7e;
    text-underline-offset: 4px;
  }

  .checkout-v2 .checkout-payment-actions > #payment-check:hover,
  .checkout-v2 .checkout-payment-actions > #payment-contact:hover,
  .checkout-v2 .checkout-payment-actions > [data-back-step="3"]:hover {
    border: 0;
    background: transparent;
    color: #fff;
  }

  .checkout-v2 .checkout-payment-actions > #payment-create {
    min-height: 38px;
    margin: 0;
    padding: 7px 12px;
    font-size: 13px;
  }

  .checkout-v2 .checkout-payment-actions > #payment-open {
    flex: 1 1 100%;
    min-height: 48px;
  }
}

/* Make the second setup payment explicit and readable in both compact and full summaries. */
.checkout-v2 .pay-summary .pay-next-payment {
  margin: 5px 0 12px;
  padding: 10px 12px;
  border: 1px solid #9d8747;
  border-left: 4px solid #e1c36c;
  border-radius: 7px;
  background: #211e15;
  color: #fff;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}
.checkout-v2 .pay-summary .pay-balance-row {
  align-items: center;
  margin: 5px 0;
  padding: 12px 11px;
  border: 1px solid #9d8747;
  border-left: 4px solid #e1c36c;
  border-radius: 7px;
  background: #211e15;
  color: #fff;
  font-size: 17px;
}
.checkout-v2 .pay-summary .pay-balance-row > span > span {
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.3;
}
.checkout-v2 .pay-summary .pay-balance-row span small {
  margin-top: 4px;
  color: #f1e6c5;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}
.checkout-v2 .pay-summary #price-project-note,
.checkout-v2 .pay-summary #price-support-timing { color: #f1e6c5; font-size: 14px; font-weight: 600; line-height: 1.4; }
.checkout-v2 .pay-summary .pay-balance-row strong { color: #f1dc99; font-size: 24px; }
.checkout-v2 .pay-summary #price-due-note { color: #fff; font-size: 15px; font-weight: 650; line-height: 1.5; }

@media (min-width: 851px) {
  .checkout-v2 .pay-summary #price-next-payment { display: none; }
}

@media (max-width: 850px) {
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary .pay-next-payment {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 4px 0 0;
    padding: 7px 9px;
    font-size: 14px;
    line-height: 1.35;
  }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary .summary-expand { grid-row: 5; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary #checkout-submit { grid-row: 1 / span 2; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary #price-due-note { display: block; grid-row: 4; margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary #price-due-note:empty { display: none; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary .pay-next-payment { grid-row: 3; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary .pay-next-payment[hidden] { display: none !important; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary.is-expanded .pay-next-payment { display: none; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary.is-expanded .summary-expand { grid-row: 3; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary.is-expanded #price-due-note {
    grid-row: 4;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
  }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary.is-expanded .pay-balance-row {
    grid-column: 1 / -1;
    padding: 12px;
  }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary .pay-status.is-error { grid-row: 6; }
  .checkout-v2 .checkout-grid:not(.is-payment-step) > .pay-summary .quote-retry:not([hidden]) { grid-row: 7; }
}
