/* Registration form styles.
   Only the handful of rules the form actually needs from site.css, so the
   whole 2000-line framework stylesheet doesn't have to be loaded onto the themed
   page (it would fight the zerif theme). Everything else the form uses -
   form-control, form-group, col-sm-* - comes from the Bootstrap the theme
   already loads. */

#registration .required   { color: red; padding-left: 2px; }
#registration .block      { display: block; }
#registration .full-width { width: 100% !important; }
#registration .grey,
#registration .gray       { color: #808080 !important; }

#registration            { max-width: 100%; }
#registration select     { max-width: 100%; }

/* Desktop keeps the original shrink-to-fit sizing. */
@media (min-width: 768px) {
  #registration .auto-width,
  #registration select.auto-width { width: auto !important; max-width: 100%; }
}

/* Mobile. `width:auto` sized the Program <select> to its longest option, and the
   program titles are very long, so the control ran off the side of the screen and
   dragged the page with it. Below the Bootstrap breakpoint everything fills its
   column instead. */
@media (max-width: 767px) {
  #registration .auto-width,
  #registration select.auto-width,
  #registration input.form-control,
  #registration select.form-control,
  #registration textarea.form-control {
    width: 100% !important;
    max-width: 100%;
  }
  /* iOS Safari zooms the whole page when a focused input is under 16px. */
  #registration input.form-control,
  #registration select.form-control,
  #registration textarea.form-control {
    font-size: 16px;
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
  }
  #registration input[type=submit],
  #registration .btn {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
  #registration h2.goleft {
    text-align: left;
    margin: 16px 0 6px 0 !important;
    line-height: inherit !important;
  }
  /* Radio/checkbox rows need room to be tapped accurately. */
  #registration input[type=radio],
  #registration input[type=checkbox] { width: 20px; height: 20px; vertical-align: top; }
  #registration label { line-height: 1.4; }
}

/* ---- Registration confirmation ---- */
.ns-confirm { max-width: 760px; }
.ns-confirm-banner {
  border-left: 4px solid #4caf50;
  background: #f4faf5;
  padding: 16px 18px;
  margin: 0 0 28px;
  border-radius: 3px;
}
.ns-confirm-banner h2 { margin: 0 0 6px; }
.ns-confirm-sub { margin: 0; color: #555; }
.ns-confirm h3 {
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3e3e3;
}
.ns-confirm table { width: 100%; border-collapse: collapse; margin: 0; }
.ns-confirm th {
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #666;
  border-bottom: 2px solid #ddd;
  padding: 8px 10px;
}
.ns-confirm td { padding: 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.ns-confirm th:last-child, .ns-confirm td:last-child { text-align: right; white-space: nowrap; }
.ns-confirm-total { text-align: right; font-size: 18px; margin: 14px 0 0; }
.ns-confirm-steps { padding-left: 22px; }
.ns-confirm-steps li { margin-bottom: 12px; line-height: 1.55; }
.ns-confirm-help { margin-top: 24px; color: #555; }
.ns-confirm-sign { margin-top: 28px; }

@media (max-width: 767px) {
  .ns-confirm-banner { padding: 14px; }
  .ns-confirm th { font-size: 11px; padding: 6px 6px; }
  .ns-confirm td { padding: 8px 6px; }
  /* the program column carries long titles; let it wrap rather than push wide */
  .ns-confirm td:nth-child(2) { word-break: break-word; }
  .ns-confirm-total { text-align: left; }
}

/* swimmer names should not wrap mid-name; the program column absorbs the width */
.ns-confirm td:first-child, .ns-confirm th:first-child { white-space: nowrap; padding-right: 18px; }
.ns-confirm table + .ns-confirm-total,
.ns-confirm-total { margin-top: 18px; padding-top: 4px; }
@media (max-width: 767px) {
  /* on a narrow screen a long name may still need to wrap - allow it there only */
  .ns-confirm td:first-child, .ns-confirm th:first-child { white-space: normal; padding-right: 8px; }
}

.ns-confirm-installment {
  background: #fff8e6;
  border-left: 4px solid #e0a800;
  padding: 12px 14px;
  margin: 14px 0 0;
  border-radius: 3px;
  line-height: 1.55;
}

/* ---- Step 1 program picker ---- */
#program-picker { margin-bottom: 8px; }
#registration .ns-hint { display: block; margin-top: 6px; color: #666; line-height: 1.45; }
#registration h2.goleft { margin-top: 26px; }

/* The theme's .btn-default renders white-on-white here, so the submit was
   effectively invisible. Style it explicitly rather than depending on the theme. */
#registration input[type=submit].ns-submit,
#registration input[type=submit] {
  background: #e8603c;
  border: 1px solid #d4512e;
  color: #fff;
  padding: 12px 26px;
  font-size: 16px;
  border-radius: 3px;
  margin-top: 24px;
  cursor: pointer;
}
#registration input[type=submit]:hover { background: #d4512e; }
#registration input[type=submit][disabled] { background: #bbb; border-color: #aaa; cursor: default; }

/* Registration rejected (terms not accepted, no swimmer, no program) */
.ns-confirm-banner.ns-confirm-error { border-left-color: #c0392b; background: #fdf3f2; }
#registration .ns-submit-link, .ns-confirm .ns-submit-link {
  display: inline-block; background: #e8603c; color: #fff; padding: 12px 26px;
  border-radius: 3px; text-decoration: none; margin-top: 8px;
}
.ns-confirm .ns-submit-link:hover { background: #d4512e; color: #fff; }

/* ---- Current-season status ---- */
.ns-season { max-width: 780px; margin: 0 0 28px; }
.ns-season-head { border-left: 4px solid #4caf50; background: #f4faf5; padding: 16px 18px; border-radius: 3px; }
.ns-season-head.ns-season-closed { border-left-color: #888; background: #f6f6f6; }
.ns-season-head h2 { margin: 0 0 6px; }
.ns-season-head p { margin: 0; color: #555; }