/** ================================================================ wp admin

 */



.form-table input[type=text] {

  width: 400px;

}



/** ================================================================ backend

 */



.ppy-input-desc {

  padding-top: 4px;

  padding-left: 4px;

  color: #afafaf;

}



/** ================================================================ common

 */



.ppy-card {

  box-sizing: border-box;

  padding: 20px;

  width: 100%;

  max-width: 360px;

  font-family: 'Open Sans', helvetica, arial, sans-serif;

}



.ppy-qrcode {

  width: 100%;

  max-width: 340px;

  height: auto;

  max-height: 340px;

  display: block;

  margin: auto;

}



.ppy-qrcode svg {

  width: 100%;

  height: 100%;

}



.ppy-logo {

  height: 126px;

  width: 100%;

  max-width: 360px;

  text-align: center;

  margin: auto;

  background-image: url("../image/promptpay.jpg");

  background-repeat: no-repeat;

  background-size: contain;

}



.ppy-head {

  display: none;

}



.ppy-meta {

  -o-text-overflow: ellipsis;

  text-overflow: ellipsis;

  overflow: hidden;

}



.ppy-meta-line {

  display: block;

  line-height: 24px;

  white-space: nowrap;

}



/** ================================================================ style

 */



/* shadow */

.ppy-card.ppy-style2 {

  /* shadow */

  -webkit-box-shadow: 0px 0px 10px 4px rgba(230, 230, 230, 0.4);

  box-shadow: 0px 0px 10px 4px rgba(230, 230, 230, 0.4);

}



/* color on meta */

.ppy-card.ppy-style1 {

  padding: 20px 0 0 0;

  width: 400px;

  border: 1px solid #003d6a;

  border-radius: 6px;

}



.ppy-card.ppy-style1 .ppy-logo {

  margin: 0 20px;

}



.ppy-card.ppy-style1 .ppy-meta {

  padding: 18px;

  background-color: #003d6a;

  color: white;

}



/* empty */

.ppy-card.ppy-style3 {

  padding: 0;

}



/** ================================================================ woocommerce-order-details

 */



.woocommerce-order-details .ppy-card {

  margin-bottom: 40px;

}

.ppy-payment-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
  width: 100% !important;
}

.ppy-payment-row .ppy-card,
.ppy-payment-row .ppy-slip-box {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 380px !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}

/* mobile: force each block onto its own line, no shrinking */
@media (max-width: 600px) {
  .ppy-payment-row {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ppy-payment-row .ppy-card,
  .ppy-payment-row .ppy-slip-box {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}




/** ================================================================ test

 */



.ppy-test {

  padding: 12px;

}



.ppy-test .ppy-card {

  float: left;

  margin: 8px;

}



.ppy-test .ppy-head {

  background-color: whitesmoke;

  border: 1px solid #d0d0d0;

  font-size: 14px;

  display: block;

  overflow: hidden;

  -o-text-overflow: ellipsis;

  text-overflow: ellipsis;

  padding: 20px;

}

/** ================================================================ slip upload
 */

.ppy-slip-box {
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 40px;
  padding: 20px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-family: 'Open Sans', helvetica, arial, sans-serif;
}

.ppy-slip-title {
  margin-top: 0;
  font-size: 16px;
}

.ppy-slip-form input[type="file"] {
  width: 100%;
}

.ppy-slip-submit {
  cursor: pointer;
}

.ppy-slip-warning {
  color: #d32f2f;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 0;
}

.ppy-slip-message {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.ppy-slip-message.ppy-slip-error {
  background-color: #fbeaea;
  color: #a94442;
  border: 1px solid #ebccd1;
}

.ppy-slip-message.ppy-slip-success {
  background-color: #eaf7ea;
  color: #3c763d;
  border: 1px solid #d6e9c6;
}

.ppy-slip-success-box {
  background-color: #eaf7ea;
  color: #3c763d;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  padding: 12px;
  margin: 0;
}

.ppy-slip-box.ppy-slip-done {
  background-color: #eaf7ea;
  border-color: #d6e9c6;
  color: #3c763d;
}