/* Modern card-payment polish. Scoped to the hosted Juspay card form only. */
.mc-payv3-page .mc-juspay-form {
  padding: 20px;
  border: 1px solid #e3e3de;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(20, 20, 18, 0.03),
    0 10px 30px rgba(20, 20, 18, 0.035);
}

.mc-payv3-page .mc-hosted-fields-head {
  align-items: center;
  padding: 0 2px 18px;
}

.mc-payv3-page .mc-hosted-kicker {
  color: #666660;
  font-size: 11.5px;
  font-weight: 650;
}

.mc-payv3-page .mc-hosted-fields-head h3 {
  margin-top: 7px;
  margin-bottom: 3px;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.mc-payv3-page .mc-hosted-fields-head p {
  max-width: 560px;
  color: #767670;
  font-size: 12.5px;
  line-height: 19px;
}

.mc-payv3-page .mc-provider-status {
  min-height: 31px;
  padding: 6px 10px;
  border-color: #e2e2dd;
  background: #f8f8f5;
  color: #666660;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mc-payv3-page .mc-provider-status.is-ready {
  border-color: #d9e2d5;
  background: #f3f7f1;
  color: #4f604a;
}

.mc-payv3-page .mc-card-fields {
  gap: 15px 12px;
  padding: 15px;
  border: 1px solid #e8e8e3;
  border-radius: 15px;
  background: #f8f8f6;
  box-shadow: none;
}

.mc-payv3-page .mc-card-field {
  gap: 8px;
}

.mc-payv3-page .mc-card-field > span {
  padding-inline: 2px;
  color: #42423e;
  font-size: 11.5px;
  font-weight: 680;
}

.mc-payv3-page .mc-card-field > span em {
  max-width: 110px;
  padding: 3px 7px;
  border: 1px solid #e1e1dc;
  border-radius: 999px;
  background: #fff;
  color: #6f6f69;
  font-size: 9px;
  letter-spacing: 0.045em;
}

.mc-payv3-page .mc-payv3-frame {
  height: 52px;
  border-color: #d5d5d0;
  border-radius: 11px;
  background: #fff;
  box-shadow:
    0 1px 1px rgba(20, 20, 18, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease,
    transform 0.16s ease;
}

.mc-payv3-page .mc-payv3-frame iframe {
  height: 50px !important;
}

.mc-payv3-page .mc-payv3-frame:focus-within,
.mc-payv3-page .mc-payv3-frame.is-focused {
  border-color: #777771;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(25, 25, 23, 0.055),
    0 4px 12px rgba(20, 20, 18, 0.045);
  transform: translateY(-1px);
}

.mc-payv3-page .mc-payv3-frame.is-valid:not(.is-focused) {
  border-color: #ccd8c8;
  background: #fff;
}

.mc-payv3-page .mc-payv3-frame.is-invalid {
  border-color: #c9958b;
  background: #fffafa;
  box-shadow: 0 0 0 3px rgba(140, 52, 43, 0.05);
}

.mc-payv3-page .mc-hosted-assurances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 14px;
  padding: 0 2px 14px;
  border-bottom-color: #ecece8;
}

.mc-payv3-page .mc-hosted-assurances span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #70706a;
  font-size: 11.25px;
  line-height: 17px;
}

.mc-payv3-page .mc-purchase-consent {
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid #ecece7;
  border-radius: 12px;
  background: #fafaf8;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.mc-payv3-page .mc-purchase-consent:hover {
  border-color: #deded8;
  background: #f8f8f5;
}

.mc-payv3-page .mc-purchase-consent input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.mc-payv3-page .mc-purchase-consent span {
  color: #5f5f59;
  font-size: 12px;
  line-height: 19px;
}

.mc-payv3-page .mc-payment-actions {
  gap: 10px;
  margin-top: 12px;
}

.mc-payv3-page .mc-payment-reset,
.mc-payv3-page .mc-submit-payment {
  min-height: 50px;
  border-radius: 11px;
}

.mc-payv3-page .mc-payment-reset {
  padding-inline: 15px;
  border-color: #ddddda;
  box-shadow: 0 1px 1px rgba(20, 20, 18, 0.02);
}

.mc-payv3-page .mc-submit-payment {
  box-shadow: 0 4px 14px rgba(20, 20, 18, 0.08);
}

@media (max-width: 700px) {
  .mc-payv3-page .mc-juspay-form {
    padding: 16px;
    border-radius: 16px;
  }

  .mc-payv3-page .mc-hosted-fields-head {
    gap: 10px;
    padding-bottom: 15px;
  }

  .mc-payv3-page .mc-card-fields {
    gap: 13px 10px;
    padding: 12px;
    border-radius: 13px;
  }

  .mc-payv3-page .mc-hosted-assurances {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .mc-payv3-page .mc-purchase-consent {
    margin-top: 12px;
  }
}

@media (max-width: 430px) {
  .mc-payv3-page .mc-juspay-form {
    margin-inline: -2px;
    padding: 14px;
    border-radius: 14px;
  }

  .mc-payv3-page .mc-card-fields {
    padding: 10px;
    border-radius: 12px;
  }

  .mc-payv3-page .mc-payv3-frame {
    height: 51px;
    border-radius: 10px;
  }

  .mc-payv3-page .mc-payv3-frame iframe {
    height: 49px !important;
  }

  .mc-payv3-page .mc-payment-reset,
  .mc-payv3-page .mc-submit-payment {
    min-height: 49px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-payv3-page .mc-payv3-frame,
  .mc-payv3-page .mc-purchase-consent {
    transition: none !important;
  }
}