/* Checkout invoice (#invoice in bottom.php; app.js builds the rows). Kept out of
   master.css, which CodeKit compiles from the scss/ sources. */

/* Column labels: a darker tan, so they read on the paper */
#Checkout #invoice thead td {
  color: #8c7c52;
}

/* Amounts line up on the right, so the decimals stack */
#Checkout #invoice thead td.price,
#Checkout #invoice thead td.total,
#Checkout #invoice tbody td.price,
#Checkout #invoice tbody td.total,
#Checkout #invoice tfoot td.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#Checkout #invoice tbody td.price,
#Checkout #invoice tbody td.qty,
#Checkout #invoice tbody td.total {
  line-height: 20px;
  vertical-align: middle;
}
#Checkout #invoice tbody td.price {
  padding: 0 10px 0 6px;
}
#Checkout #invoice thead td.price {
  padding-right: 10px;
}

/* Lines: soft tan rules between items, a firmer one under the last */
#Checkout #invoice tbody td {
  border-bottom: 1px solid rgba(180, 163, 123, 0.45);
}
#Checkout #invoice tbody tr:last-child td {
  border-bottom: 2px solid #b4a37b;
}

/* Item: name, then brewery, then the package in a lighter weight */
#Checkout #invoice tbody td.beer {
  padding: 13px 6px 13px 18px;
  line-height: 18px;
}
#Checkout #invoice tbody td.beer strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.75px;
}
#Checkout #invoice tbody td.beer span {
  line-height: 18px;
  margin-top: 0;
}
#Checkout #invoice tbody td.beer em {
  color: #6b6440;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25px;
}

/* Quantity: a paper-toned box instead of the glossy default */
#Checkout #invoice tbody td.qty .selectboxit-container {
  margin: 0 auto;
  vertical-align: middle;
}
#Checkout #invoice tbody td.qty .selectboxit {
  width: 56px !important;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #b4a37b;
  border-radius: 4px;
  box-shadow: none;
  transition: border-color 0.2s, background-color 0.2s;
}
#Checkout #invoice tbody td.qty .selectboxit,
#Checkout #invoice tbody td.qty .selectboxit > * {
  height: 28px !important;
  line-height: 28px !important;
}
#Checkout #invoice tbody td.qty .selectboxit:hover,
#Checkout #invoice tbody td.qty .selectboxit:focus,
#Checkout #invoice tbody td.qty .selectboxit.selectboxit-open {
  background: rgba(255, 255, 255, 0.8);
  border-color: #f15c22;
}
#Checkout #invoice tbody td.qty .selectboxit-text {
  color: #524f22;
  font: 700 14px/28px "museo-sans-rounded", Helvetica, sans-serif;
  max-width: none !important;
  text-indent: 10px;
}
#Checkout #invoice tbody td.qty .selectboxit-arrow-container {
  height: 28px !important;
  width: 22px;
}
#Checkout #invoice tbody td.qty .selectboxit-arrow {
  border-top-color: #8c7c52;
  margin-top: -2px;
}
#Checkout #invoice tbody td.qty .selectboxit-options {
  background: #f6f3eb;
  border: 1px solid #b4a37b;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(82, 79, 34, 0.18);
  margin-top: 2px;
  min-width: 100% !important;
}
#Checkout #invoice tbody td.qty .selectboxit-option-anchor {
  color: #524f22;
  font: 700 14px/28px "museo-sans-rounded", Helvetica, sans-serif;
  height: 28px;
}
#Checkout #invoice tbody td.qty .selectboxit-option.selectboxit-focus .selectboxit-option-anchor,
#Checkout #invoice tbody td.qty .selectboxit-option-anchor:hover {
  background: #f15c22;
  color: #fff;
}

/* Remove: a lighter tan ×, orange on hover */
#Checkout #invoice tbody td.total a.delete {
  margin-top: 1px;
}
#Checkout #invoice tbody td.total a.delete::before,
#Checkout #invoice tbody td.total a.delete::after {
  background: #b4a37b;
  height: 14px;
  left: 8px;
  margin-top: -7px;
  width: 2px;
  transition: background 0.2s;
}
#Checkout #invoice tbody td.total a.delete:hover::before,
#Checkout #invoice tbody td.total a.delete:hover::after {
  background: #f15c22;
}

/* Totals: subtotal and tax quiet, the grand total set off by a short rule */
#Checkout #invoice tfoot #subtotal td,
#Checkout #invoice tfoot #taxes td {
  color: #6b6440;
  font-size: 13px;
  line-height: 22px;
  padding-top: 0;
}
#Checkout #invoice tfoot #subtotal td {
  padding-top: 12px;
}
#Checkout #invoice tfoot #total td {
  font-size: 17px;
  line-height: 24px;
  padding-top: 9px;
}
#Checkout #invoice tfoot #total td.left {
  position: relative;
}
#Checkout #invoice tfoot #total td.left::after {
  border-top: 1px solid #b4a37b;
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  width: 140px;
}
#Checkout #invoice tfoot #total td.right {
  background: linear-gradient(#b4a37b, #b4a37b) 0 4px / 100% 1px no-repeat;
}
#Checkout #invoice tfoot a.next {
  margin-top: 16px;
}

@media all and (max-width: 480px) {
  /* phones hide the price column (380.scss) */
  #Checkout #invoice thead td.price,
  #Checkout #invoice tbody td.price {
    padding: 0;
  }
  #Checkout #invoice tbody td.beer {
    padding: 11px 6px 11px 6px;
    line-height: 16px;
  }
  #Checkout #invoice tbody td.beer strong {
    font-size: 13px;
    line-height: 16px;
  }
  #Checkout #invoice tbody td.beer span,
  #Checkout #invoice tbody td.beer em {
    font-size: 12px;
    line-height: 16px;
  }
  #Checkout #invoice tbody td.qty .selectboxit {
    width: 50px !important;
  }
  #Checkout #invoice tfoot #total td {
    font-size: 15px;
  }
  #Checkout #invoice tfoot #total td.left::after {
    width: 120px;
  }
}

/* Billing form: the Vehicle row (curbside only) starts its own line. The fields float, and since the
   pickup-time ASAP box is gone, Vehicle would otherwise fit beside Pickup Date. Needs three ids to beat
   the tablet rule "#Checkout div#billing.slide form>div { clear: none }" in master.css. */
#Checkout div#billing.slide #hascurbside {
  clear: both;
}

/* Billing form: Pickup Date stays on one line on phones, like Order Type above it. master.css stacks the label over
   the day menu under 481px, from when the row also held a time menu. */
@media (max-width: 480px) {
  #Checkout div#billing.slide #pickups #timelabel {
    border-bottom: 3px solid #ccb671;
    height: 47px;
    padding: 19px 0 11px 15px;
    white-space: nowrap; /* the text just fits the 112px label */
  }
  #Checkout div#billing.slide #pickups span.day {
    clear: none;
    padding: 15px 0 7px 7px;
    width: calc(100% - 119px);
  }
}

/* Billing form: Date of Birth sits beside the Order Policy box from 596px up, and that box's two-line label makes it
   61px tall. Date of Birth grows to match, so the two underlines meet in one line. */
@media (min-width: 596px) {
  #Checkout div#billing.slide #hasterms #doblabel {
    box-sizing: border-box;
    height: 61px;
  }
  #Checkout div#billing.slide #hasterms #dob {
    padding-bottom: 25px; /* 61px less its 19px top padding, 14px height and 3px underline; the text stays put */
  }
  /* Pickup Date's day menu and the Order Policy box take the rest of their rows, so every row's underline ends at the
     form's right edge like City/State/Zip's. master.css sizes them to their content or a fixed 328px, which stopped
     short. flow-root, not overflow: hidden, so the day menu's list isn't clipped. */
  #Checkout div#billing.slide #pickups span.day,
  #Checkout div#billing.slide #hasterms div.prettycheckbox {
    display: flow-root;
    float: none;
    width: auto;
  }
}

/* Billing form: the two checkbox rows, the text-message opt-in under Phone and the Order Policy agreement at the end.
   Their labels are sentences that wrap, so they get the body text's look instead of the fields' one-line uppercase
   labels, and the row grows with them instead of master.css's fixed height. */
#Checkout div#billing.slide #hastexts {
  clear: both;
}
#Checkout div#billing.slide #hastexts div.prettycheckbox,
#Checkout div#billing.slide #hasterms div.prettycheckbox {
  box-sizing: border-box;
  height: auto;
  min-height: 45px;
  overflow: hidden;
  padding-bottom: 10px;
  padding-top: 12px;
}
#Checkout div#billing.slide #hastexts div.prettycheckbox {
  width: 100%;
}
#Checkout div#billing.slide #hastexts div.prettycheckbox > a,
#Checkout div#billing.slide #hasterms div.prettycheckbox > a {
  bottom: auto;
  top: -3px;
}
#Checkout div#billing.slide #hastexts div.prettycheckbox label,
#Checkout div#billing.slide #hasterms div.prettycheckbox label {
  color: #65612f;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  padding-left: 10px;
  text-transform: none;
  width: calc(100% - 42px);
}
#Checkout div#billing.slide #hasterms div.prettycheckbox label a {
  border-bottom: 0;
  color: #f15c22;
  padding-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#Checkout div#billing.slide #hasterms div.prettycheckbox label a:hover {
  color: #b14013;
}
/* The red/green marker app.js shows when the Order Policy box is hovered sits just past the end of the label's first
   line (termsMarker), never further right than 28px in from the label's right end. Keep that strip clear of text so
   it always fits, and keep each link on one line. */
#Checkout div#billing.slide #hasterms div.prettycheckbox label {
  padding-right: 28px;
  width: calc(100% - 70px);
}
#Checkout div#billing.slide #hasterms div.prettycheckbox label a {
  white-space: nowrap;
}