/* ==========================================================================
   richter2026 — account.css
   Customer account pages. Milestone: 0.7 Customer Pages

   Templates targeted (all in account/):
     account.tpl        — dashboard icon grid
     login.tpl           — standalone login (not the checkout AJAX version)
     register.tpl         — registration form (table.form already in forms.css)
     edit.tpl / password.tpl / newsletter.tpl — table.form only, no new CSS
     address_list.tpl / address_form.tpl — minimal, no new CSS
     order_list.tpl      — order summary cards
     order_info.tpl       — order detail with table.list
     wishlist.tpl          — wishlist product table
     return_list.tpl       — returns list (same pattern as order_list)
     return_info.tpl       — return detail (same pattern as order_info)
     return_form.tpl       — table.form, no new CSS
     download.tpl          — downloads list (same pattern as order_list)
     transaction.tpl       — transaction list (table.list pattern)
     reward.tpl / voucher.tpl / forgotten.tpl — table.form / minimal

   Classes already covered in earlier milestone files:
     table.form, table.radio, .buttons, .required, .error, .warning,
     .success, .attention, .help, .pagination, .breadcrumb — all in
     forms.css / utilities.css
   ========================================================================== */

/* ---- Account dashboard icon grid (.account_left_column / _right_column) -
   account.tpl renders alternating .account_left_column /
   .account_right_column divs (not a proper grid element), two per row.
   Images use $this->config->get('config_template') so they resolve to
   this theme's own image/account/ folder once richter2026 is active. */

.content > .account_left_column,
.content > .account_right_column {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - var(--space-4));
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.content > .account_left_column {
  margin-right: var(--space-4);
}

.content > .account_left_column:hover,
.content > .account_right_column:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.content > .account_left_column img,
.content > .account_right_column img {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  opacity: 0.85;
}

.content > .account_left_column a,
.content > .account_right_column a {
  display: block;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  text-decoration: none;
}

.content > .account_left_column a:hover,
.content > .account_right_column a:hover {
  color: var(--color-primary-dark);
}

/* v1.21 bugfix — "the text is shown twice, one with a link, one
   without" (looking like an accidental duplicate). Two separate
   issues, both now fixed: account.tpl already wrote genuinely
   distinct description copy per tile instead of literally repeating
   the link text (see that file's own comment) — but this rule here
   was never actually able to style that description text visually
   distinct from the link, which is likely why it still read as "the
   same text twice" even with different words: "br + *" can only ever
   match an actual HTML element immediately after a <br>, and
   $text_edit/etc. here is a bare, unwrapped text node — CSS has no
   way to select a bare text node at all, so this rule silently never
   matched anything. account.tpl now wraps that text in
   <span class="account-tile-desc">; styled directly below instead. */
.content > .account_left_column .account-tile-desc,
.content > .account_right_column .account-tile-desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* Clearfix after the icon grid */
h2 + .content { overflow: hidden; }

/* ---- Standalone login page (.login-content) ----------------------------
   Mirrors the checkout AJAX login layout but as a full page template.
   .left = new customer / register; .right = returning customer / login */

.login-content {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.login-content .left,
.login-content .right {
  flex: 1 1 50%;
  padding: var(--space-6);
}

.login-content .right {
  border-left: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.login-content h2 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
}

.login-content .content {
  padding: 0;
  background: none;
  border: none;
}

.login-content .content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.login-content .content b {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
}

.login-content .content input[type="text"],
.login-content .content input[type="password"] {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-bottom: var(--space-4);
}

/* v1.24 bugfix — "account/login also has the big spacing we fixed
   already for the checkout earlier". Same root cause, different page:
   the checkout fix neutralized <br> spacing scoped to
   .checkout-content specifically, which doesn't reach this entirely
   separate .login-content scope at all — this page needed the exact
   same fix applied here too. */
.login-content br {
  display: none;
}

.login-content .content a:not(.button) {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.login-content .content a:not(.button):hover {
  color: var(--color-primary);
}

/* ---- Contact page address block (.contact-info) -------------------------
   v1.29: information/contact.tpl's .contact-info wrapper had zero CSS
   anywhere. v1.28 explicitly left this info box "as-is", assuming it
   would inherit generic .content/.left/.right styling — but the
   .contact-info wrapper class broke that inheritance path, a genuine
   gap confirmed via a full class-coverage audit against every
   template in the theme, both overridden and default-fallback) — a
   genuine styling gap, not a scoping choice, flagged by the person as
   "strange layout". Structure is .contact-info > .content > .left/.right
   (store address / phone+fax+tax IDs), different nesting than
   .login-content above, so it needs its own rules rather than reusing
   that block directly. <br> tags here are NOT hidden like .login-content's
   are — unlike that page's purely decorative spacing <br>s, these are
   genuine line breaks within the address/phone block and removing them
   would run the address together onto one line. */
.contact-info .content {
  display: flex;
  gap: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.contact-info .left,
.contact-info .right {
  flex: 1 1 50%;
  min-width: 0;
}

.contact-info b {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
}

@media (max-width: 767px) {
  .contact-info .content {
    flex-direction: column;
  }
}

/* ---- Order/return/download list cards (.order-list etc.) ---------------
   All three share the same visual pattern: a card per record with a
   header strip (.order-id / .return-id / .download-id + status badge)
   and a two-column body (.order-content etc.) with action icons. */

.order-list,
.return-list,
.download-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--color-bg);
  transition: box-shadow var(--transition-base);
}

.order-list:hover,
.return-list:hover,
.download-list:hover {
  box-shadow: var(--shadow-sm);
}

/* Card header strip */
.order-id,
.return-id,
.download-id {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.order-id b,
.return-id b,
.download-id b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Status badge */
.order-status,
.return-status,
.download-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-muted);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-left: auto;
}

.order-status b,
.return-status b,
.download-status b {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

/* Card body */
.order-content,
.return-content,
.download-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.order-content > div,
.return-content > div,
.download-content > div {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.7;
}

.order-content b,
.return-content b,
.download-content b {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Action icons (info/reorder/return icons) */
.order-info,
.return-info,
.download-info {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.order-info a img,
.return-info a img,
.download-info a img {
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.order-info a:hover img,
.return-info a:hover img,
.download-info a:hover img {
  opacity: 1;
}

/* ---- Order detail: table.list -------------------------------------------
   order_info.tpl, return_info.tpl, transaction.tpl all use this class.
   Standard striped data table with left/right cell alignment. */

table.list {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
}

table.list thead td {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

table.list tbody td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
  line-height: var(--line-height-base);
}

table.list tbody tr:nth-child(even) td {
  background: var(--color-bg-subtle);
}

table.list tfoot td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border-strong);
  font-weight: var(--font-weight-medium);
}

table.list td.left { text-align: left; }
table.list td.right { text-align: right; }

/* ---- Wishlist product table (.wishlist-info) ----------------------------
   Similar structure to the cart table but with a Stock column and
   action icons (cart-add + remove) instead of qty input. */

.wishlist-info {
  margin-bottom: var(--space-6);
  overflow-x: auto;
}

.wishlist-info table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.wishlist-info thead td {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.wishlist-info tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.wishlist-info td.image {
  width: 72px;
}

.wishlist-info td.image img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wishlist-info td.name a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.wishlist-info td.name a:hover {
  color: var(--color-primary);
}

.wishlist-info td.price {
  text-align: right;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.wishlist-info td.price s {
  color: var(--color-price-old);
  font-weight: var(--font-weight-normal);
}

.wishlist-info td.price b {
  color: var(--color-accent);
}

.wishlist-info td.stock {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.wishlist-info td.action {
  text-align: right;
  white-space: nowrap;
}

.wishlist-info td.action img {
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.wishlist-info td.action img:hover {
  opacity: 1;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 991px) {
  /* Dashboard icon grid: 2-col is fine down to tablet, stays as-is */
  /* Login two-column: tighten padding at tablet width before collapsing */
  .login-content .left,
  .login-content .right {
    padding: var(--space-4);
  }
}

@media (max-width: 767px) {
  .content > .account_left_column,
  .content > .account_right_column {
    width: 100%;
    margin-right: 0;
    display: block;
  }

  .login-content {
    flex-direction: column;
  }

  .login-content .right {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .order-content,
  .return-content,
  .download-content {
    flex-wrap: wrap;
  }

  .order-info,
  .return-info,
  .download-info {
    flex: 1 1 100%;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
  }
}