/* ==========================================================================
   HttpWatch store: page content in the www.httpwatch.com refreshed design.
   Loaded by _Layout.cshtml after site-chrome.css, whose tokens (--hw-*) and chrome classes it uses.
   Replaces the legacy grid.min.css, main.css, main2.css and responsive-table.css. The page markup keeps the
   legacy class names (row, col-*, section2, color3, ...) and they are restyled here.

   Sections
     1. Base and grid       4. Order table          7. Notices
     2. Typography          5. Forms                8. Confirm / completed pages
     3. Steps               6. Buttons              9. Small screens
   ========================================================================== */

/* ---------- 1. Base and grid ---------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; background: #fff; color: var(--hw-body); font: 400 15.5px/1.6 'Open Sans', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#container { position: relative; min-width: 320px; }

/* Same container widths as the website (its inline legacy grid + main.css): 990px wide on desktop. */
.container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; width: 990px; } }

/* The subset of the Bootstrap 3 grid the store pages use. */
.store-main .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.store-main [class*="col-"] { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.store-main .col-xs-4 { width: 33.3333%; }
.store-main .col-xs-6 { width: 50%; }
@media (min-width: 768px) {
  .store-main .col-sm-6 { width: 50%; }
  .store-main .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .store-main .col-md-6 { width: 50%; }
}
.text-right { text-align: right; }
.clear { clear: both; }

.store-main { padding: 28px 0 72px; }
.ph + .store-main { padding-top: 12px; }
.store-main :focus-visible { outline: none; box-shadow: var(--hw-focus); border-radius: 4px; }

/* The error page carries its own #content > .container wrapper. */
.store-main #content { padding: 0; }
.store-main .container .container { max-width: none; width: auto; padding: 0; }

/* ---------- 2. Typography ---------- */
.store-main :is(h1, h2, h3, h4) { margin: 0 0 16px; color: var(--hw-ink); font-weight: 700; line-height: 1.3; }
.store-main h1 { font-size: 28px; letter-spacing: -.01em; }
.store-main h2 { font-size: 21px; }
.store-main p { margin: 0 0 14px; color: var(--hw-body); font-size: 15.5px; line-height: 1.6; }
.store-main p strong, .store-main strong { color: var(--hw-ink); font-weight: 600; }
.store-main a { color: var(--hw-link); text-decoration: none; }
.store-main a:hover { text-decoration: underline; }
.store-main hr { height: 0; margin: 32px 0; padding: 0; border: 0; border-top: 1px solid var(--hw-line); clear: both; }
.store-main ul { margin: 0; padding-left: 20px; }
.store-main p.text-right { color: var(--hw-muted); font-size: 13px !important; }
/* Confirm page payment-processing overlay: keep its light text on the dark backdrop. */
.store-main p.processing-overlay__text { margin: 0; color: #f0f0f0; font-size: 14px; font-weight: 700; }
/* The page header band shows the page heading, so pages that repeat it in their body hide that copy here. */
.store-main .store-page-heading { display: none; }

/* ---------- 3. Steps ---------- */
.store-main .steps { row-gap: 12px; }
.store-main .steps > div { display: flex; align-items: center; gap: 12px; }
.steps span { color: var(--hw-muted); font-size: 15px; font-weight: 600; line-height: 1.35; }
.steps span.number {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--hw-soft-2); color: var(--hw-muted); font-size: 15px; font-weight: 700;
}
.steps span.number.active { background: #3f9b1e; color: #fff; }
.steps span.number.active + span { color: var(--hw-ink); }
.store-main .steps + hr { margin-top: 24px; }

/* ---------- 4. Order table ---------- */
.section1 { padding-bottom: 8px; }
.section1 h2 { display: inline-block; margin: 6px 0 18px; }
.section1 span.currency { float: right; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.section1 span.currency label { margin: 0; color: var(--hw-muted); font-size: 14px; font-weight: 600; }
.section1 span.currency select { width: 96px; }
.section1 > span:not(.currency) { display: block; margin-top: 10px; color: var(--hw-muted); font-size: 13px; text-align: right; }

/* A light brand-blue header (the website's --acc-bg1/--acc-bg2 tints) with navy text, faint row lines and a
   tinted totals block. The header text is about 11:1 on its background. */
.store-main table {
  width: 100%; margin: 0; border: 1px solid #c9dbef; border-collapse: separate; border-spacing: 0;
  border-radius: var(--hw-radius); overflow: hidden; background: #fff;
}
.store-main th {
  padding: 11px 14px; background: #e8f1fc; border-bottom: 1px solid #cfe3fa;
  color: #17365a; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase;
}
.store-main th strong { color: inherit; font-weight: inherit; }
.store-main th:last-child { text-align: right; }
.store-main td { padding: 12px 14px; color: var(--hw-body); font-size: 15px; line-height: 1.5; vertical-align: middle; }
.store-main td strong { color: var(--hw-ink); font-weight: 600; }
.store-main td.rightAlign { text-align: right; }
.store-main td.nowrap { white-space: nowrap; }
.store-main tr.topBorder td { border-top: 1px solid #cfe3fa; }
/* The totals block: the topBorder row (Total, or Sub total on the confirm page) and the rows after it. */
.store-main :is(tr.topBorder, tr.topBorder ~ tr) td { background: #f4f8fd; }
.store-main tr.topBorder td:last-child strong, #orderTotal { color: #17365a; font-size: 16px; font-weight: 700; }
@media (min-width: 768px) {
  .store-main tbody tr + tr td { border-top: 1px solid #eef1f5; }
  .store-main tbody tr.topBorder ~ tr td { border-top-color: transparent; }
}
.store-main td .electronic-delivery { color: var(--hw-link); }
.store-main td input#quantity { width: 64px; text-align: center; }

.section1 .coupon { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin-top: 16px; }
.section1 .coupon label { margin: 0; color: var(--hw-ink); font-size: 14.5px; font-weight: 600; }
.section1 .coupon input[type='text'] { width: 180px; }
.section1 .coupon > div { flex-basis: 100%; text-align: right; }
.section1 .submit { display: flex; justify-content: flex-end; margin-top: 24px; }

/* ---------- 5. Forms ---------- */
/* Fields are 36px on desktop and 44px with 16px text on phones and touch screens (section 9): a comfortable touch
   target, and iOS Safari zooms the page when a field with text smaller than 16px gets focus. They have a cool
   off-white fill and a mid-grey border so they stand out from the white page, and turn white when focused. */
.store-main input[type='text'], .store-main input[type='email'], .store-main select {
  height: 36px; padding: 0 12px; background: #f7f9fc; border: 1px solid #a9b4c3; border-radius: var(--hw-radius-sm);
  color: var(--hw-ink); font-size: 15px; line-height: 34px; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.store-main input[type='text']:focus, .store-main input[type='email']:focus, .store-main select:focus {
  outline: none; border-color: var(--hw-blue-2); box-shadow: 0 0 0 3px rgba(75, 157, 231, .25); border-radius: var(--hw-radius-sm);
  background-color: #fff;
}
/* Read-only (the quantity when the cart fixes it, e.g. an upgrade or renewal): a darker fill and the lighter border, unlike an editable field. */
.store-main input[readonly] { background: #eceff4; border-color: var(--hw-line-strong); color: var(--hw-body); }
.store-main select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background: #f7f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px 16px no-repeat;
}
.store-main input.errorField { border-color: #d93025; background-color: #fff6f5; }
.store-main input.errorField:focus { background-color: #fff6f5; }
.store-main input[type='checkbox'] { width: 17px; height: 17px; margin: 0; accent-color: var(--hw-blue); vertical-align: -3px; }

.payment-form h2 { margin-top: 4px; }
.payment-form ul { margin: 0 0 8px; padding: 0; list-style: none; }
.payment-form li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 12px; font-size: 14px; color: var(--hw-muted); }
.payment-form label { flex: 0 0 120px; margin: 0; padding-right: 4px; color: var(--hw-ink); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: right; }
.payment-form li > input[type='text'], .payment-form li > input[type='email'], .payment-form span.select { flex: 1 1 0; min-width: 0; }
.payment-form span.select select { width: 100%; }
/* Optional fields have no asterisk: keep their right edge in line with the required fields. */
.payment-form li > :is(input[type='text'], input[type='email'], span.select):not(.field1):not(:has(+ span.required)) { margin-right: 18px; }
.payment-form span.required { flex: 0 0 10px; color: #b93d0a; font-size: 15px; font-weight: 700; line-height: 1; }
.payment-form span.information, .payment-form span.errorMessage { flex-basis: 100%; padding: 5px 18px 0 128px; font-size: 13px; line-height: 1.45; }
.payment-form span.information { color: var(--hw-muted); }
.store-main span.errorMessage { color: #c5221f; font-weight: 600; }
.section1 .coupon span.errorMessage { font-size: 13px; }

.payment-form input.field1[type='text'] { flex: none; width: 64px; }
.payment-form input.field2[type='text'] { flex: none; width: 84px; }
.payment-form input.cvv[type='text'] { flex: none; width: 76px; }
.payment-form li.cards { gap: 6px; padding-left: 128px; }
.payment-form li.cards img { height: 24px; width: auto; margin: 0; transition: opacity .15s; }
.payment-form li.cards img.deselect { opacity: .3; }
.payment-form li.delivery-detailes { padding-left: 128px; }
.payment-form .useBillingDetailsCheck { display: inline-flex; align-items: center; gap: 10px; }
.payment-form .useBillingDetailsCheck label { flex: none; padding: 0; color: var(--hw-ink); font-weight: 600; text-align: left; cursor: pointer; }
.payment-form .useBillingDetailsCheck input[type='hidden'] { display: none; }

/* ---------- 6. Buttons (as the website: navy for buying, outlined for secondary actions) ---------- */
.next-button, .cancel-button, .button3, .button2, .section1 .coupon button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin: 0; padding: 0 28px;
  border: 0; border-radius: var(--hw-radius-sm); box-shadow: none; -webkit-appearance: none; appearance: none;
  font: 700 16px/1 'Open Sans', Arial, Helvetica, sans-serif; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.next-button, .next-button:visited, .button2, .button2:visited { background: var(--hw-blue); color: #fff; }
.next-button:hover, .next-button:focus-visible, .button2:hover, .button2:focus-visible { background: #124a73; color: #fff; text-decoration: none; }
.cancel-button, .button3, .section1 .coupon button { background: #fff; color: var(--hw-blue); box-shadow: inset 0 0 0 1.5px #b9cde3; }
.cancel-button:hover, .button3:hover, .section1 .coupon button:hover { background: #f2f7fc; color: var(--hw-blue); box-shadow: inset 0 0 0 1.5px var(--hw-blue); text-decoration: none; }
.button3, .section1 .coupon button { height: 40px; padding: 0 18px; font-size: 14.5px; }
/* The coupon Update button is the same height as the coupon box beside it. */
.section1 .coupon button { height: 36px; }
.store-main button:disabled { opacity: .55; cursor: not-allowed; }
/* Link buttons: beat the .store-main a link colour. */
.store-main a.next-button, .store-main a.button2 { color: #fff; }
.store-main a.next-button:hover, .store-main a.button2:hover { color: #fff; text-decoration: none; }

.button-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 0 0 4px; }
.button-group.button-group--start { justify-content: flex-start; }
.button-group + br.clear, .button-group + br.clear + br { display: none; }
.button-group ~ p.text-right { margin-top: 12px; }
#submitOrder { padding: 0 34px; }

/* ---------- 7. Notices ---------- */
.alertPanel {
  margin: 0 0 24px; padding: 14px 18px; border-radius: var(--hw-radius); border-left: 4px solid #d93025;
  background: #fdeeed; color: #8c1d18; font-size: 15px; line-height: 1.55;
}
.store-main .alertPanel p, .alertPanel span { margin: 0 0 6px; color: #8c1d18; font-size: 15px; }
.store-main .alertPanel p:last-child { margin-bottom: 0; }
.alertPanel ul { margin: 6px 0 0; padding-left: 20px; }
.alertPanel a { color: #8c1d18; text-decoration: underline; }

/* ---------- 8. Confirm and Order Completed pages ---------- */
.store-main address { margin: 0 0 16px; font-style: normal; }
.store-main address p { margin: 0; line-height: 1.6; }
.store-main dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 14px; margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.store-main dt { color: var(--hw-ink); font-weight: 600; }
.store-main dd { margin: 0; color: var(--hw-body); overflow-wrap: anywhere; }
.store-main .credit-card-payment { grid-template-columns: 150px minmax(0, 1fr); }
.store-main .row > [class*="col-"] > .button3 { margin-bottom: 8px; }

/* Licence key: a tinted tile as on the website's pricing cards. */
.color3 {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 18px; border-radius: var(--hw-radius);
  background: var(--acc-bg1); box-shadow: inset 0 0 0 1px var(--acc-bg2); color: var(--hw-ink); font-size: 18px; font-weight: 700;
  line-height: 1.35; overflow-wrap: anywhere;
}
.color3 img { flex: none; margin: 0; }
.color3 .key-icon { flex: none; width: 24px; height: 24px; color: var(--acc-text); }
.store-main .color3 a { display: inline-flex; align-items: center; gap: 12px; color: var(--hw-link); }
/* "Multiple licenses" note (inline yellow box on the Order Completed page). */
.section2 > div[style] { border-radius: var(--hw-radius); }
.section2 > div[style] p { margin: 0; }
.print { display: inline-block; height: 25px; margin: 0 0 16px; padding-left: 35px; background: url(../images/icons/print.png) left center / 25px 24px no-repeat; }
.store-main .print a { font-size: 15px; font-weight: 700; line-height: 25px; }
@media (min-resolution: 1.5dppx) { .print { background-image: url(../images/icons/print@2x.png); } }

/* ---------- 9. Small screens ---------- */
/* Phones and touch screens: taller fields with 16px text (see section 5). */
@media (max-width: 767px), (pointer: coarse) {
  .store-main input[type='text'], .store-main input[type='email'], .store-main select { height: 44px; font-size: 16px; line-height: 42px; }
  .section1 .coupon button { height: 44px; }
}
@media (max-width: 991px) {
  .store-main .steps > div { flex-direction: column; text-align: center; gap: 8px; }
  .section1 h2 { display: block; }
}
@media (max-width: 767px) {
  .store-main { padding-bottom: 56px; }
  .steps span { font-size: 13px; }
  .section1 span.currency { float: none; }
  .section1 > span:not(.currency) { text-align: left; }
  .section1 .coupon { justify-content: flex-start; }
  .section1 .coupon > div { text-align: left; }

  /* The order table becomes one labelled block per line. */
  .store-main table.responsive, .responsive thead, .responsive tbody, .responsive tr, .responsive td { display: block; }
  .responsive thead tr { position: absolute; top: -9999px; left: -9999px; }
  .responsive tr { padding: 6px 0; border-bottom: 1px solid var(--hw-line); }
  .responsive tr:last-child { border-bottom: 0; }
  .store-main .responsive tr.topBorder td { border-top: 0; }
  .responsive td { position: relative; min-height: 34px; padding: 6px 12px 6px 38%; text-align: left !important; }
  .responsive td:empty { display: none; }
  .responsive td.empty { min-height: 0; padding-left: 12px; }
  .responsive td.empty:before { content: none !important; }
  .responsive td:before { position: absolute; top: 6px; left: 12px; width: 34%; color: var(--hw-muted); font-size: 12.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .responsive td:nth-of-type(1):before { content: "Part"; }
  .responsive td:nth-of-type(2):before { content: "Description"; }
  .responsive td:nth-of-type(3):before { content: "Qty"; }
  .responsive td:nth-of-type(4):before { content: "Price"; }

  .payment-form label { flex-basis: 100%; padding: 0 0 6px; text-align: left; }
  .payment-form label:empty { display: none; }
  .payment-form span.information, .payment-form span.errorMessage { padding-left: 0; }
  .payment-form li.cards, .payment-form li.delivery-detailes { padding-left: 0; }
  .payment-form .useBillingDetailsCheck label { padding: 0; }
  .store-main dl, .store-main .credit-card-payment { grid-template-columns: 120px minmax(0, 1fr); }
  .button-group { justify-content: stretch; }
  .button-group > * { flex: 1 1 0; }
}