/* newage legacy content primitives.
   A handful of account, affiliate and returns templates still use the older class names (row / col-sm-*, form-group,
   form-control, table, well, btn-default ...). This gives those names a newage look inside the page body only, so those
   pages match the rest of the site until they are rewritten one by one. New templates must not use these classes. */
.page-body .row { display: flex; flex-wrap: wrap; gap: var(--g-md); margin: 0 0 var(--g-md); }
.page-body .row > [class*="col-"] { flex: 1 1 100%; min-width: 0; }
@media (min-width: 768px) {
  .page-body .row > .col-sm-3 { flex: 1 1 calc(25% - var(--g-md)); }
  .page-body .row > .col-sm-4 { flex: 1 1 calc(33.33% - var(--g-md)); }
  .page-body .row > .col-sm-6 { flex: 1 1 calc(50% - var(--g-md)); }
  .page-body .row > .col-sm-8 { flex: 1 1 calc(66.66% - var(--g-md)); }
  .page-body .row > .col-sm-9 { flex: 1 1 calc(75% - var(--g-md)); }
}
.page-body .clearfix::after { content: ""; display: table; clear: both; }

/* forms */
.page-body fieldset { border: 0; margin: 0 0 var(--g-md); padding: 0; }
.page-body legend { font-family: var(--head); font-size: 20px; text-transform: uppercase; padding: 0 0 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); width: 100%; }
.page-body .form-group { margin-bottom: 16px; display: grid; gap: 6px; }
.page-body .form-horizontal .form-group { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); align-items: start; gap: 6px 16px; }
.page-body .form-horizontal .form-group > [class*="col-"] { grid-column: auto; }
.page-body .control-label { font-size: 14px; font-weight: 600; color: #3b3937; padding-top: 12px; }
.page-body .required > .control-label::after, .page-body .required > label::after { content: " *"; color: var(--orange-cta); }
.page-body .form-control, .page-body input[type="text"], .page-body input[type="email"], .page-body input[type="password"], .page-body input[type="tel"], .page-body input[type="number"], .page-body input[type="date"], .page-body select, .page-body textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--white);
  font-family: var(--body); font-size: 16px; color: var(--charcoal);
}
.page-body .form-control:focus, .page-body input:focus, .page-body select:focus, .page-body textarea:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.page-body input[type="checkbox"], .page-body input[type="radio"] { width: 18px; height: 18px; accent-color: var(--orange-cta); padding: 0; }
.page-body .radio-inline, .page-body .checkbox-inline { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; font-weight: 400; }
.page-body .radio, .page-body .checkbox { margin: 6px 0; }
.page-body .radio label, .page-body .checkbox label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.page-body .has-error .form-control, .page-body .has-error input, .page-body .has-error select { border-color: var(--orange-cta); }
.page-body .help-block { font-size: 13.5px; color: #6b6764; }
.page-body .input-group { display: flex; gap: 8px; }
.page-body .input-group-btn { display: flex; }

/* buttons */
.page-body .btn-default, .page-body .btn-info { border-color: var(--charcoal); color: var(--charcoal); background: transparent; }
.page-body .btn-default:hover, .page-body .btn-info:hover { background: var(--charcoal); color: #fff; }
.page-body .btn-danger { border-color: var(--orange-cta); color: var(--orange-cta); background: transparent; }
.page-body .btn-danger:hover { background: var(--orange-cta); color: #fff; }
.page-body .btn-sm, .page-body .btn-xs { padding: 9px 14px; font-size: 12.5px; }
.page-body input.btn { cursor: pointer; }
.page-body .buttons { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--g-md) 0; }
.page-body .buttons.clearfix::after { display: none; } /* the float clearer would otherwise become an empty flex item and push the buttons in by the gap */
@media (max-width: 520px) { .page-body .buttons .pull-right:only-child, .page-body .buttons .pull-right:only-child .btn { width: 100%; text-align: center; justify-content: center; } }
.page-body .buttons .pull-right { margin-left: auto; }
.page-body .buttons .pull-left { margin-right: auto; }
.page-body .pull-right { float: none; margin-left: auto; }
.page-body .loader { display: none; }

/* tables */
.page-body .table-responsive { overflow-x: auto; margin-bottom: var(--g-md); }
.page-body .table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); margin-bottom: var(--g-md); }
.page-body .table > thead > tr > td, .page-body .table > thead > tr > th { background: var(--offwhite); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #6b6764; font-weight: 700; }
.page-body .table td, .page-body .table th { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 15px; vertical-align: top; text-align: left; }
.page-body .table .text-right, .page-body td.text-right { text-align: right; }
.page-body .table .text-center, .page-body td.text-center { text-align: center; }
.page-body .table img { max-width: 80px; height: auto; border-radius: 3px; }

/* panels and wells */
.page-body .well, .page-body .panel { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 18px; margin-bottom: var(--g-md); }
.page-body .panel-heading { font-weight: 700; margin-bottom: 8px; }
.page-body .list-unstyled { list-style: none; margin: 0 0 var(--g-md); padding: 0; line-height: 2; }
.page-body .list-unstyled a:hover { color: var(--orange-text); }

/* text helpers */
.page-body .text-left { text-align: left; }
.page-body .text-right { text-align: right; }
.page-body .text-center { text-align: center; }
.page-body .text-success { color: #2f6b3d; }
.page-body .text-muted { color: #6b6764; }
.page-body .hidden-xs { display: block; }
@media (max-width: 767px) {
  .page-body .hidden-xs { display: none; }
  .page-body .form-horizontal .form-group { grid-template-columns: minmax(0, 1fr); }
  .page-body .control-label { padding-top: 0; }
}
.page-body .hidden { display: none; }

/* legacy data tables (order details, returns...) on phones: tighter cells, stacked action buttons, so they fit without sideways scrolling */
@media (max-width: 600px) {
  .page-body .table td, .page-body .table th { padding: 9px 6px; font-size: 13.5px; overflow-wrap: break-word; }
  .page-body .table td.text-right, .page-body .table td.text-center { white-space: nowrap; }
  .page-body .table td .btn { display: block; margin: 2px 0; padding: 8px 8px; font-size: 12px; letter-spacing: .04em; }
}
@media (max-width: 900px) {
  .page-body .table td .btn { display: block; margin: 2px 0; padding: 9px 12px; font-size: 12px; letter-spacing: .04em; }
}