/* ==========================================================================
   NHV-19 — Account pages
   ==========================================================================
   Twenty-four templates — login, register, dashboard, addresses, orders,
   downloads, returns, rewards, transactions, wishlist — built from the same
   handful of Bootstrap components.

   Styled centrally rather than by overriding twenty-four templates, the same
   reasoning as the breadcrumbs in NHV-02: overriding a few would leave the rest
   looking like stock OpenCart, and the difference would show the moment a
   customer moved between them. Every account container carries id="account-*",
   so one attribute selector reaches all of them.

   Only the eight templates that lacked an <h1> are overridden, because that is
   structure and CSS cannot fix it. */

/* --- Headings -------------------------------------------------------------- */

/* Matches .nhv-cat-title, so a page title reads the same here as on a listing. */
[id^="account-"] #content > h1 {
  margin: 0 0 16px;
  font-family: var(--nhv-font-display);
  font-size: 22px;
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-navy);
}

/* Section headings. The copper rule rather than the full navy panel: the
   dashboard alone stacks five of these, and five navy panels down one page reads
   as five separate blocks rather than one page. Same treatment as the brand
   letters in NHV-18. */
/* :not(.nhv-block-title) matters — the register page uses the site's block
   heading inside its panels, and this rule was repainting that navy-on-navy with
   a copper underline through it. */
[id^="account-"] #content h2:not(.nhv-block-title),
[id^="account-"] #content legend {
  margin: 24px 0 12px;
  padding: 0 0 8px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-h4, 18px);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-navy);
  border: 0;
  border-bottom: 2px solid var(--nhv-copper);
}
[id^="account-"] #content > h1 + h2 { margin-top: 0; }
[id^="account-"] #content h3 {
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-base);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-navy);
}

/* --- Panels ---------------------------------------------------------------- */

/* Bootstrap's .well is a grey box with an inset shadow. */
[id^="account-"] .well {
  padding: 18px;
  background: var(--nhv-sand);
  border: 1px solid var(--nhv-rule-warm);
  border-radius: var(--nhv-radius-sm);
  box-shadow: none;
}
[id^="account-"] .well h2 { margin-top: 0; }

/* --- Forms ----------------------------------------------------------------- */

[id^="account-"] .control-label,
[id^="account-"] .col-form-label {
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-navy);
}

[id^="account-"] .form-control,
[id^="account-"] .form-control:focus {
  height: 38px;
  padding: 0 10px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
  background-color: var(--nhv-cream-bright);
  border: 1px solid var(--nhv-rule-warm);
  border-radius: var(--nhv-radius-sm);
  box-shadow: none;
}
[id^="account-"] textarea.form-control { height: auto; padding: 8px 10px; }
[id^="account-"] select.form-control {
  padding-right: 28px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A3795B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
}
[id^="account-"] .form-control:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 1px; }

/* Required fields are marked with a red asterisk on the label; on this palette
   that is --nhv-sale-red rather than Bootstrap's pure red. */
[id^="account-"] .required .control-label:before,
[id^="account-"] .form-group.required .control-label:before { color: var(--nhv-sale-red); }

/* Validation. Bootstrap's has-error only tints the label, which is easy to miss
   next to a field that still looks untouched. */
[id^="account-"] .text-danger {
  display: block;
  margin-top: 4px;
  font-size: var(--nhv-fs-small);
  color: var(--nhv-sale-red);
}
[id^="account-"] .has-error .form-control { border-color: var(--nhv-sale-red); }

[id^="account-"] .radio label,
[id^="account-"] .checkbox label {
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
}

/* --- Buttons --------------------------------------------------------------- */

[id^="account-"] .btn-primary,
[id^="account-"] input[type="submit"].btn,
[id^="account-"] .buttons .btn-primary {
  padding: 10px 22px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nhv-cream-bright);
  background: var(--nhv-footer-ground);
  border: 1px solid var(--nhv-footer-ground);
  border-radius: var(--nhv-radius-sm);
  text-shadow: none;
  box-shadow: none;
}
[id^="account-"] .btn-primary:hover,
[id^="account-"] .btn-primary:focus,
[id^="account-"] input[type="submit"].btn:hover {
  color: var(--nhv-cream-bright);
  background: var(--nhv-navy);
  border-color: var(--nhv-navy);
}

[id^="account-"] .btn-default {
  padding: 10px 18px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-navy);
  background: var(--nhv-sand);
  border: 1px solid var(--nhv-rule-warm);
  border-radius: var(--nhv-radius-sm);
  box-shadow: none;
}
[id^="account-"] .btn-default:hover { color: var(--nhv-navy); background: var(--nhv-rule-warm); }
[id^="account-"] .btn-danger {
  background: var(--nhv-sale-red);
  border-color: var(--nhv-sale-red);
  border-radius: var(--nhv-radius-sm);
}
[id^="account-"] .btn:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

[id^="account-"] .buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--nhv-rule-warm);
}
/* Core lays these out with pull-left/pull-right floats inside .buttons; the flex
   row above makes the floats redundant and they would break the alignment. */
[id^="account-"] .buttons .pull-right { margin-left: auto; float: none; }
[id^="account-"] .buttons .pull-left { float: none; }

/* --- Tables ---------------------------------------------------------------- */
/* Orders, downloads, transactions, rewards, returns and the wishlist. */

[id^="account-"] .table {
  margin-bottom: 18px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-small);
  color: var(--nhv-navy);
  border-color: var(--nhv-rule-warm);
}
[id^="account-"] .table > thead > tr > td,
[id^="account-"] .table > thead > tr > th {
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-cream);
  background: var(--nhv-navy-panel);
  border-color: var(--nhv-navy-border);
  vertical-align: middle;
}
[id^="account-"] .table > tbody > tr > td { vertical-align: middle; border-color: var(--nhv-rule-warm); }
[id^="account-"] .table-bordered { border-color: var(--nhv-rule-warm); }
[id^="account-"] .table a { color: var(--nhv-copper); }
[id^="account-"] .table a:hover { color: var(--nhv-navy); }
[id^="account-"] .table img { max-width: 60px; height: auto; }

/* --- Dashboard link lists -------------------------------------------------- */

[id^="account-"] #content .list-unstyled {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
}
[id^="account-"] #content .list-unstyled > li { margin: 0; }
[id^="account-"] #content .list-unstyled > li > a {
  display: block;
  padding: 10px 14px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
  background: var(--nhv-cream-bright);
  border: 1px solid var(--nhv-rule-warm);
  border-radius: var(--nhv-radius-sm);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
[id^="account-"] #content .list-unstyled > li > a:hover,
[id^="account-"] #content .list-unstyled > li > a:focus {
  color: var(--nhv-copper);
  background: var(--nhv-sand);
  border-color: var(--nhv-copper);
}
[id^="account-"] #content .list-unstyled > li > a:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

@media (max-width: 767px) {
  [id^="account-"] #content .list-unstyled { grid-template-columns: 1fr; }
  [id^="account-"] .buttons { flex-wrap: wrap; }
}

/* --- The account menu module ----------------------------------------------
   Sits in column_right on every account page. Core renders it as a Bootstrap
   .list-group, which is a white box with #ddd borders. Given the same panel
   treatment as the category and filter modules so the column is consistent
   whichever page you are on.

   Scoped to .nhv-account-menu rather than a bare .list-group: .list-group is a
   generic Bootstrap component and other modules use it. */

.nhv-account-menu { margin-bottom: 25px; }
.nhv-account-menu .nhv-block-head { margin-bottom: 0; }

.nhv-account-menu .list-group {
  margin: 0;
  border: 1px solid var(--nhv-rule-warm);
  border-top: 0;
  border-radius: 0;
}
.nhv-account-menu .list-group-item {
  padding: 10px 14px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
  background: var(--nhv-cream-bright);
  border: 0;
  border-bottom: 1px solid var(--nhv-rule-warm);
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nhv-account-menu .list-group-item:last-child { border-bottom: 0; }
.nhv-account-menu .list-group-item:hover,
.nhv-account-menu .list-group-item:focus {
  color: var(--nhv-copper);
  background: var(--nhv-sand);
}
.nhv-account-menu .list-group-item:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: -2px; }

/* --- Login: equal-height panels -------------------------------------------
   The two panels hold different amounts of copy — New Customer is three short
   lines, Returning Customer is a two-field form — so as plain floated columns
   they finished at different depths and the pair looked unfinished.

   The row becomes a flex line and each column a flex container, so both wells
   fill the taller of the two. Scoped to #account-login: .row is Bootstrap's
   grid primitive and is used all over the account section. */

#account-login #content > .row {
  display: flex;
  flex-wrap: wrap;
}
#account-login #content > .row > [class*="col-"] {
  display: flex;
  margin-bottom: 20px;
}
#account-login #content > .row > [class*="col-"] > .well {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

/* With the panels now equal, the two calls to action sat at different heights,
   which drew attention to the very thing the equal heights fixed. margin-top
   auto drops each to the foot of its own panel so they line up.

   align-self keeps the link button to its content width — stretch is the flex
   default and would run it the full width of the panel. */
#account-login .well > .btn-primary {
  margin-top: auto;
  align-self: flex-start;
}
#account-login .well > form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
#account-login .well > form > input[type="submit"] {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Register ---------------------------------------------------------------
   Two columns: personal details on the left, password and newsletter stacked on
   the right, action row across both. Placement is explicit rather than left to
   auto-flow, which would put the newsletter back under the details column. */

.nhv-register-lead {
  margin: 0 0 20px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
}
.nhv-register-lead a { color: var(--nhv-copper); font-weight: var(--nhv-fw-semi); }

#account-register .nhv-register-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  align-items: start;
}
/* The left panel spans both rows. Without the span, the right-hand pair share
   row 1 with it, so row 1 takes the tall panel's height and Newsletter starts
   level with its foot instead of under Password. */
#account-register .nhv-register-form > #account { grid-column: 1; grid-row: 1 / span 2; }
#account-register .nhv-register-form > fieldset:not(#account) { grid-column: 2; }
#account-register .nhv-register-form > .nhv-register-actions { grid-column: 1 / -1; grid-row: 3; }

/* Each fieldset is a block: the site's heading panel, then a bordered body —
   the same pairing as every other block on the site. The fieldset resets are
   needed because a fieldset carries browser defaults that fight the panel. */
#account-register .nhv-form-panel {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  min-width: 0;
}
#account-register .nhv-form-panel > .nhv-block-head { margin-bottom: 0; }
#account-register .nhv-form-body {
  padding: 16px 16px 4px;
  background: var(--nhv-cream-bright);
  border: 1px solid var(--nhv-rule-warm);
  border-top: 0;
}

/* One field per row now the columns are half-width. Core lays this out as
   .form-horizontal — a floated col-sm-2 label beside a col-sm-10 field — which
   leaves a ragged label column, so labels go above their fields. */
/* Bootstrap sets `.form-horizontal .form-group { margin: 0 -15px }` — negative
   gutters meant to cancel a grid row's padding. There is no such row here, so
   they pulled every field 15px outward and ate all but 1px of the panel's 16px
   padding: the inputs sat hard against the border. Zeroed wherever a panel
   provides the padding instead. */
[id^="account-"] .form-horizontal .form-group { margin-right: 0; margin-left: 0; }

#account-register .nhv-register-form .form-group { margin-bottom: 14px; }
#account-register .nhv-register-form .control-label {
  float: none;
  width: auto;
  padding: 0 0 5px;
  text-align: left;
  display: block;
}
#account-register .nhv-register-form .form-group > div[class*="col-sm-"],
#account-register .nhv-register-form .form-group > div[class*="col-md-"] {
  float: none;
  width: 100%;
  padding: 0;
}

/* The agree checkbox and the submit are one action row, not a floated pair. */
#account-register .nhv-register-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 30px;
  padding-top: 18px;
  border-top: 1px solid var(--nhv-rule-warm);
}
#account-register .nhv-register-agree {
  flex: 1 1 auto;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-small);
  color: var(--nhv-navy);
}
#account-register .nhv-register-agree a { color: var(--nhv-copper); font-weight: var(--nhv-fw-semi); }
#account-register .nhv-register-agree input { margin: 0 0 0 4px; }
#account-register .nhv-register-actions input[type="submit"] { flex: 0 0 auto; }

@media (max-width: 767px) {
  #account-register .nhv-register-form { grid-template-columns: 1fr; }
  #account-register .nhv-register-form > #account,
  #account-register .nhv-register-form > fieldset:not(#account) { grid-column: 1; grid-row: auto; }
  #account-register .nhv-register-form > .nhv-register-actions { grid-row: auto; }
}