/* Square card form in the checkout's payment step (bottom.php, inc/square.php). Loaded only when checkout is on Square.
   Everything sits in the form's 580px column: the totals as a short receipt, then Name on Card, the Card box (Square's
   iframe, styled from app.js since its insides can't be reached from here), the consent line and the promo code. */

/* Totals: a receipt across the column, amounts lined up with the right edge of the card box */
@media all and (min-width: 631px) {
  #Checkout div.slide#payment table#shipInfo {
    border-collapse: collapse;
    float: none;
    margin: 6px auto 4px;
    padding: 0;
    width: 580px;
  }
  /* inset like the field labels below (15px) */
  #Checkout div.slide#payment table#shipInfo td {
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 15px;
  }
  #Checkout div.slide#payment table#shipInfo td:last-child {
    color: #524f22;
    font-family: "museo-sans-rounded", Helvetica;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0 2px 0 0;
    text-align: right;
  }
  #Checkout div.slide#payment table#shipInfo h4 {
    font-size: 13px;
  }
  #Checkout div.slide#payment table#shipInfo tr.total td {
    border-top: 3px solid #ccb671;
    height: 44px;
    line-height: 44px;
  }
  #Checkout div.slide#payment table#shipInfo tr.total h4 {
    color: #524f22;
  }
  #Checkout div.slide#payment table#shipInfo tr.total td:last-child {
    color: #f15c22;
    font-size: 24px;
    font-weight: 800;
  }
  #Checkout div.slide#payment table#shipInfo tr.total td:last-child i {
    color: #b4a37b;
    font-size: 14px;
    font-style: normal;
    margin-left: 6px;
    text-decoration: line-through;
  }
}

/* Name on Card: label and input across the whole column, like the other fields */
#Checkout div.slide#payment #payment-form .square-name {
  clear: both;
  display: flex;
}
#Checkout div.slide#payment #payment-form .square-name label {
  flex: none;
}
#Checkout div.slide#payment #payment-form .square-name #cardNameInput {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  width: auto;
}

/* "Card" with the Secured by Square note, then Square's box */
#Checkout div.slide#payment .square-card-label {
  align-items: baseline;
  clear: both;
  display: flex;
  justify-content: space-between;
  padding: 16px 2px 6px 15px;
}
#Checkout div.slide#payment .square-card-label span {
  color: #f15c22;
  font-family: "museo-slab", Helvetica;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#Checkout div.slide#payment .square-card-label small {
  color: #8b8559;
  font-family: "museo-sans-rounded", Helvetica;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
#Checkout div.slide#payment .square-card-label small svg {
  height: 11px;
  margin-right: 4px;
  vertical-align: -1px;
  width: 9px;
}

/* the height keeps the popup from jumping while Square draws its fields */
#Checkout div.slide#payment #card-container {
  clear: both;
  margin: 0;
  min-height: 50px;
}
/* Square's hint and error line sits in our page under its iframe: our font, and no empty gap when there's nothing to say */
#Checkout div.slide#payment #card-container .sq-card-message {
  color: #8b8559;
  font-family: "museo-sans-rounded", Helvetica;
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 0 2px;
}
#Checkout div.slide#payment #card-container .sq-card-message:empty {
  display: none;
}
#Checkout div.slide#payment #card-container .sq-card-message-error {
  color: #b32d2e;
}

#Checkout div.slide#payment .square-consent p {
  clear: both;
  color: #65612f;
  font-family: "museo-sans-rounded", Helvetica;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin: 12px 0 6px;
}

@media all and (max-width: 630px) {
  #Checkout div.slide#payment .square-card-label small {
    font-size: 11px;
  }
  #Checkout div.slide#payment .square-consent p {
    font-size: 12px;
    line-height: 17px;
  }
}