.pcs-pay-btn {
    padding-left: 24px;
    padding-right: 24px;
}

.pcs-pay-block .price {
    white-space: nowrap;
    color: black;
    font-weight: bolder;
    font-size: larger;
}
.pcs-pay-block .price .currency-symbol {
    color: #a0a0a0;
}

/*
 * https://css-tricks.com/considerations-styling-modal/
 * https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
 * https://sqlpey.com/javascript/top-2-methods-to-prevent-body-scrolling-when-modal-is-opened/
 */

.pcs-body-no-scroll {
  height: 100vh;
  overflow-y: hidden;
}

.pcs-modal-overlay {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.pcs-modal-checkout {
    z-index: 100;
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    
    width: 550px;
    max-width: 100%;
    height: 80%;
    max-height: 100%;
    
    /* centering when unknown width/height */
    transform: translate(-50%, -50%);
    
    /* If known, negative margins are probably better (less chance of blurry text). */
    /* margin: -200px 0 0 -200px; */
    
    background: white;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);

    /* prevent scroll events spill over */
    overscroll-behavior: contain;

    overflow: hidden;
    padding: 24px;
    border-radius: 20px;
}

.pcs-modal-guts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px 20px 20px 20px;
}

.pcs-modal-guts h2 {
    margin-bottom: 0.8em;
    text-align: center;
}

.pcs-modal-guts p {
    margin-top: 0.8em;
}

.pcs-modal-checkout .pcs-modal-close-btn {
  z-index: 1; /* sits over .modal-guts */
  position: absolute;
  top: 16px;
  right: 16px; /* needs to look OK with or without scrollbar */
  
  background: black;
  color: white;
  padding: 5px 10px;
  font-size: 1.3rem;
}

.pcs-modal-checkout .pcs-modal-close-btn:hover {
    background-color: #2a5570 !important;
}

.pcs-modal-closed {
    display: none;
}