/* ==========================================================================
   DEXIE - account
   Thirty-four templates ship with OpenCart and only two are worth rewriting:
   sign-in, and the dashboard people land on afterwards. The rest are forms and
   tables, so they are styled generically here by the id every account page
   already carries. That covers all of them without thirty-four rewrites to
   maintain against the next OpenCart upgrade.
   ========================================================================== */

[id^="account-"] > .container,
[id^="account-"] #content { min-width: 0; }

/* ---------- 1. headings -------------------------------------------------- */
[id^="account-"] #content > h1,
[id^="account-"] #content > h2:first-of-type {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
[id^="account-"] #content h2,
[id^="account-"] #content legend {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 16px; padding: 0; border: 0; width: auto; float: none;
}

/* ---------- 2. forms ----------------------------------------------------- */
[id^="account-"] fieldset { border: 0; padding: 0; margin: 0 0 30px; }

[id^="account-"] .form-label,
[id^="account-"] .col-form-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 5px;
}
[id^="account-"] .form-control,
[id^="account-"] .form-select {
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 11px 13px;
  font-size: 14.5px;
  color: var(--ink);
  box-shadow: none;
}
[id^="account-"] .form-control:focus,
[id^="account-"] .form-select:focus { border-color: var(--ink); box-shadow: none; outline: 0; }
[id^="account-"] .form-control.is-invalid,
[id^="account-"] .form-select.is-invalid { border-color: var(--accent); }
[id^="account-"] .invalid-feedback { color: var(--accent); font-size: 12.5px; }
[id^="account-"] .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
[id^="account-"] .form-check-label { font-size: 14px; color: var(--ink-2); }

[id^="account-"] .btn-primary {
  background: var(--ink); border-color: var(--ink); color: var(--accent-ink);
  border-radius: var(--radius);
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 13px 26px;
}
[id^="account-"] .btn-primary:hover { background: transparent; color: var(--ink); }
[id^="account-"] .btn-light,
[id^="account-"] .btn-secondary {
  background: transparent; border: 1px solid var(--rule-2); color: var(--ink);
  border-radius: var(--radius);
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 13px 26px;
}
[id^="account-"] .btn-light:hover { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }

/* ---------- 3. tables ---------------------------------------------------- */
[id^="account-"] .table {
  border-collapse: collapse;
  font-size: 13.5px;
}
[id^="account-"] .table > :not(caption) > * > * {
  padding: 13px 12px;
  background: transparent;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
[id^="account-"] .table thead th,
[id^="account-"] .table > thead > tr > td {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
  background: transparent;
}
[id^="account-"] .table td.text-end,
[id^="account-"] .table th.text-end { font-variant-numeric: tabular-nums; }
[id^="account-"] .table-bordered > :not(caption) > * > * { border-left: 0; border-right: 0; }
[id^="account-"] .table a { color: var(--ink); font-weight: 650; text-decoration: none; }
[id^="account-"] .table a:hover { color: var(--accent); }

/* ---------- 4. sign in / register ---------------------------------------- */
.dx-auth {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 64px;
}
@media (min-width: 820px) { .dx-auth { grid-template-columns: 1fr 1fr; gap: 26px; } }

.dx-authcard {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(26px, 3.4vw, 40px);
}
.dx-authcard--primary { background: var(--ground); border-color: var(--rule-2); }

.dx-authcard__eyebrow {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px;
}
.dx-authcard__title {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 800; letter-spacing: -.035em; text-transform: uppercase;
  margin: 0 0 14px; line-height: 1.05;
}
.dx-authcard__text { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }

.dx-authcard__list { margin: 0 0 26px; }
.dx-authcard__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  padding: 6px 0;
}
.dx-authcard__list i { color: var(--accent); font-size: 11px; margin-top: 3px; }

.dx-authform { margin: 0; }
.dx-field { margin-bottom: 18px; }
.dx-field label {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
.dx-field__aside {
  display: inline-block; margin-top: 8px;
  font-size: 12px; font-weight: 650; color: var(--ink-3);
  text-decoration: none;
}
.dx-field__aside:hover { color: var(--accent); }

.dx-authbtn {
  display: block; width: 100%; text-align: center;
  background: var(--ink); border: 1px solid var(--ink); color: var(--accent-ink);
  border-radius: var(--radius);
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 15px 20px;
  cursor: pointer; text-decoration: none;
  transition: background .16s, color .16s;
}
.dx-authbtn:hover { background: transparent; color: var(--ink); }
.dx-authbtn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.dx-authbtn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }

/* ---------- 5. dashboard ------------------------------------------------- */
.dx-dash {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  grid-template-columns: 1fr;
  margin-bottom: 64px;
}
@media (min-width: 700px)  { .dx-dash { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dx-dash { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }

.dx-dash__group { background: var(--surface); padding: 26px 24px 24px; }
.dx-dash__group h4 {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 14px;
}
.dx-dash__group ul { margin: 0; }
.dx-dash__group li { margin-bottom: 2px; }
.dx-dash__group a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px 9px 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s, padding-left .18s cubic-bezier(.16,.84,.44,1);
}
.dx-dash__group a i {
  width: 17px; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
  transition: color .16s;
}
.dx-dash__group a:hover { color: var(--accent); padding-left: 5px; }
.dx-dash__group a:hover i { color: var(--accent); }

/* ---------- 6. the account sidebar module -------------------------------- */
#column-left .list-group,
#column-right .list-group { border-radius: var(--radius); }
#column-left .list-group-item,
#column-right .list-group-item {
  border-color: var(--rule);
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-2);
  padding: 11px 14px;
}
#column-left .list-group-item:hover,
#column-right .list-group-item:hover { background: var(--ground); color: var(--accent); }
#column-left .list-group-item.active,
#column-right .list-group-item.active {
  background: var(--ink); border-color: var(--ink); color: var(--accent-ink);
}

/* ---------- 7. reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dx-dash__group a, .dx-authbtn { transition: none; }
  .dx-dash__group a:hover { padding-left: 0; }
}