/* ==========================================================================
   14 — MY ACCOUNT
   --------------------------------------------------------------------------
   `06-pages.md` §8, drawn the way `prototype.html` draws it: a compact sidebar
   of nav rows, a points balance card on the night ground, and the ledger as a
   quiet bordered table.

   Three things this file bridges, in the same spirit as 11-woocommerce-bridge:
   the kit's own `.aly-*` account components, WooCommerce's
   `.woocommerce-MyAccount-*` markup, and the alaliyah-id plugin's
   `.aa-rewards__*` markup on its Rewards tab. All three appear on this page
   and only the first was ever styled.

   Loaded only in account context (see aly_enqueue_assets()).
   ========================================================================== */

/* Layout — 200px sidenav beside content at ≥1024, stacked below (spec §6.5). */
@media (min-width: 1024px) {
  .woocommerce-account .woocommerce { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  body.woocommerce-account .woocommerce > nav.woocommerce-MyAccount-navigation { grid-column: 1; float: none; inline-size: auto; width: auto; position: sticky; inset-block-start: calc(var(--nav-height) + var(--space-3)); }
  body.woocommerce-account .woocommerce > div.woocommerce-MyAccount-content { grid-column: 2; float: none; inline-size: auto; width: auto; max-inline-size: none; }
}
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; background: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: 10px; min-block-size: var(--touch-target-min); padding: 0 12px; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0;
  color: var(--color-text-body); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::before { content: ""; inline-size: 16px; block-size: 16px; flex: none; background: currentColor; -webkit-mask: var(--aly-nav-icon) center / contain no-repeat; mask: var(--aly-nav-icon) center / contain no-repeat; }
.woocommerce-MyAccount-navigation-link--dashboard a       { --aly-nav-icon: url("../assets/icons/grid.svg"); }
.woocommerce-MyAccount-navigation-link--orders a          { --aly-nav-icon: url("../assets/icons/box.svg"); }
.woocommerce-MyAccount-navigation-link--rewards a         { --aly-nav-icon: url("../assets/icons/gift.svg"); }
.woocommerce-MyAccount-navigation-link--edit-address a    { --aly-nav-icon: url("../assets/icons/pin.svg"); }
.woocommerce-MyAccount-navigation-link--payment-methods a { --aly-nav-icon: url("../assets/icons/card.svg"); }
.woocommerce-MyAccount-navigation-link--edit-account a    { --aly-nav-icon: url("../assets/icons/user.svg"); }
.woocommerce-MyAccount-navigation-link--customer-logout a { --aly-nav-icon: url("../assets/icons/x.svg"); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--color-surface-sunk); color: var(--color-text); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--gold-wash); color: var(--gold-text-on-cream); font-weight: var(--fw-semibold); }
/* Details and Sign out form a second group under a rule. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--cream-300); }
@media (max-width: 1023px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; overflow-x: auto; gap: var(--space-1); padding-block-end: var(--space-2); }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account { margin: 0; padding: 0; border: 0; }
}

/* --------------------------------------------------------------------------
   Points balance card — the `--night` modifier.

   The base `.aly-loyalty-card` in 08-account-loyalty.css is a light gold-wash
   panel. `prototype.html` draws this card on the night ground with the balance
   in gold Cormorant over a soft radial glow. The prototype is what this page
   was asked to match, so the night treatment is a MODIFIER and the base
   component is left exactly as it was.
   -------------------------------------------------------------------------- */
.aly-loyalty-card--night {
  background: var(--night-900);
  color: var(--cream-50);
  padding: var(--space-5);
  gap: var(--space-1);
}

/* The glow. Decorative only, so it is a pseudo-element and never a node. */
.aly-loyalty-card--night::after {
  content: "";
  position: absolute;
  inset-block-start: -38px;
  inset-inline-end: -38px;
  inline-size: 150px;
  block-size: 150px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgb(219 172 53 / 0.34) 0%, transparent 68%);
  pointer-events: none;
}

.aly-loyalty-card--night .aly-loyalty-card__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--ink-300);
}

.aly-loyalty-card--night .aly-loyalty-card__balance {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-500); /* gold-500 as TEXT is only safe on the night ground — 7.74:1, per 00-tokens.css */
  margin: var(--space-1) 0 0;
  font-variant-numeric: lining-nums tabular-nums; /* Cormorant's default zero is a wide old-style oval that reads as the letter "O" */
}

.aly-loyalty-card--night .aly-loyalty-card__balance-unit {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--cream-50);
  margin-inline-start: var(--space-2);
}

.aly-loyalty-card--night .aly-loyalty-card__meta {
  font-size: var(--fs-sm);
  color: var(--ink-300);
  margin: var(--space-1) 0 0;
}

.aly-loyalty-card--night .aly-loyalty-card__meta--empty {
  margin-block: var(--space-3) 0;
  max-inline-size: 40ch;
}

/* wc_price() inside the card inherits the page's price colour otherwise. */
.aly-loyalty-card--night .woocommerce-Price-amount { color: inherit; }

/* The three-property row. Two of them are placeholders and must stay
   visible — see 06-pages.md §8 and inc/account.php. */
.aly-loyalty-card__props {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  position: relative; /* above the glow */
}

.aly-loyalty-card__prop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  padding: 0.25rem var(--space-3);
  border-radius: var(--radius-pill);
  background-color: rgb(248 246 241 / 0.09);
  box-shadow: inset 0 0 0 var(--border-width) rgb(248 246 241 / 0.12);
  color: var(--cream-300);
}

.aly-loyalty-card__prop.is-soon { opacity: 0.55; }

.aly-loyalty-card__dot {
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--radius-circle);
  background-color: var(--gold-500);
  flex: none;
}

.aly-loyalty-card__prop.is-soon .aly-loyalty-card__dot { background-color: var(--ink-450); }

.aly-loyalty-card--night .aly-loyalty-card__cta {
  position: relative;
  align-self: flex-start;
  margin-block-start: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--gold-500);
  text-decoration: none;
}

.aly-loyalty-card--night .aly-loyalty-card__cta:hover { text-decoration: underline; }

.aly-loyalty-card--night .aly-loyalty-card__cta:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   The plugin's Rewards tab

   alaliyah-id renders its own panel with `.aa-rewards__*` class names. Nothing
   in this kit had ever heard of them, so that tab was the last unstyled
   surface on the site. These map onto the same treatment as the card above,
   so the Dashboard and the Rewards tab read as one design rather than two.
   -------------------------------------------------------------------------- */
.aa-rewards__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--night-900);
  color: var(--cream-50);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-block-end: var(--space-5);
}

.aa-rewards__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--ink-300);
}

.aa-rewards__points {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-500);
  font-variant-numeric: lining-nums tabular-nums;
}

.aa-rewards__worth { font-size: var(--fs-sm); color: var(--ink-300); }
.aa-rewards__worth .woocommerce-Price-amount { color: inherit; }

.aa-rewards__rule {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-inline-size: 68ch;
}

/* --------------------------------------------------------------------------
   Ledger table — the kit's `.aly-ledger-table` treatment, applied to both the
   plugin's table and WooCommerce's orders table so the account has one table
   style rather than three.
   -------------------------------------------------------------------------- */
.aa-rewards__table,
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elevation-hairline);
}

.aa-rewards__table th,
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  background: var(--color-surface-sunk);
  padding: var(--space-2) var(--space-3);
  text-align: start;
  border-block-end: var(--border-width) solid var(--color-border);
}

.aa-rewards__table td,
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  padding: var(--space-3);
  border-block-end: var(--border-width) solid var(--cream-150);
  color: var(--color-text-body);
}

.aa-rewards__table tbody tr:last-child td,
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td { border-block-end: 0; }

/* Numeric columns line up on their digits and never wrap mid-figure. */
.aa-rewards__table .aa-num,
.aly-ledger-table__amount {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Earn reads green, redeem reads coral — the prototype's pairing, and both
   are the text-safe steps rather than the display ones. */
.aa-rewards__table .is-credit { color: var(--color-success-deep); font-weight: var(--fw-semibold); }
.aa-rewards__table .is-debit  { color: var(--coral-700);          font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------------------
   Dashboard copy

   WooCommerce's stock greeting prints the customer's name twice — "Hello Sam
   (not Sam? Log out)" — which reads as a bug to everyone who is not a
   WooCommerce developer. The duplicate is its own markup, so it is toned down
   here rather than rewritten: the parenthetical drops to muted small text so
   the greeting reads as a greeting.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
  font-size: var(--fs-base);
  color: var(--color-text);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type a {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type a:hover {
  color: var(--gold-text-on-cream);
}

/* --------------------------------------------------------------------------
   Buttons inside the account content

   Something in the stack upper-cases them at
   `.woocommerce-account .woocommerce-MyAccount-content .button` — three
   class-weight steps, so it beats the bridge's button rule and "Confirm email
   address" rendered as "CONFIRM EMAIL ADDRESS" with 1.44px of tracking.

   `05-components.md` §Buttons gives label casing as written, and nothing in
   this design system shouts in a button. Matched at the same weight, in a file
   that loads after the bridge.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button {
  text-transform: none;
  letter-spacing: 0;
}

/* Points card: watermark and progress (spec §6.5) */
.aly-loyalty-card--night { position: relative; overflow: hidden; }
.aly-loyalty-card__mark { position: absolute; inset-inline-end: -40px; inset-block-end: -60px; inline-size: 220px; block-size: auto; opacity: 0.08; pointer-events: none; }
.aly-loyalty-card__progress { position: relative; margin-block-start: var(--space-4); display: grid; gap: 6px; }
.aly-loyalty-card__bar { display: block; block-size: 6px; border-radius: var(--radius-pill); background: rgb(248 246 241 / 0.14); overflow: hidden; }
.aly-loyalty-card__bar > span { display: block; block-size: 100%; background: var(--gold-500); border-radius: inherit; }
.aly-loyalty-card__progress-text { font-size: var(--fs-xs); color: var(--night-ink-2); }
.aly-loyalty-card__progress-text b { color: var(--cream-50); font-weight: var(--fw-semibold); }

/* Dashboard blocks */
.aly-account-block { margin-block-start: var(--space-5); background: var(--surface-white); border-radius: var(--radius-panel); box-shadow: var(--elevation-hairline); padding: var(--space-4); display: grid; gap: var(--space-3); }
.aly-account-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.aly-account-block__title { font-size: 22px; margin: 0; color: var(--color-text); }
.aly-account-block__more { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--gold-text-on-white); text-decoration: none; white-space: nowrap; }
.aly-account-block__meta { margin: 0; font-size: var(--fs-sm); color: var(--color-text-body); font-variant-numeric: tabular-nums; }
.aly-account-block__status { margin: 0; font-weight: var(--fw-semibold); color: var(--coral); }
.aly-timeline--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
.aly-timeline--row .aly-timeline__step { flex-direction: column; align-items: center; text-align: center; padding: 0; gap: var(--space-2); }
.aly-timeline--row .aly-timeline__step:not(:last-child)::before { inset-inline-start: 50%; inset-block-start: 0.75rem; inline-size: 100%; block-size: 2px; }
.aly-timeline--row .aly-timeline__marker { font-size: 12px; font-weight: var(--fw-bold); }
.aly-timeline--row .aly-timeline__content { display: grid; }
.aly-ledger-table { background: transparent; }
.aly-ledger-table th { background: var(--cream-50); font-size: 10px; letter-spacing: 0.09em; padding: var(--space-2) var(--space-3); }
.aly-ledger-table td { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.aly-ledger-table__amount--debit { color: var(--coral-700); } /* text-safe coral: coral-ui measures 3.83:1 on surface-white, under the 4.5:1 text minimum */

/* Rewards tab (spec §6.5): the dashboard card already states the balance. */
.woocommerce-account .aa-rewards__summary { display: none; }
.woocommerce-account .aa-rewards__rule { margin-block-end: var(--space-4); }
.aa-rewards__table th { font-size: 10px; letter-spacing: 0.09em; background: var(--cream-50); }
.aa-rewards__table .is-debit { color: var(--coral-700); } /* text-safe coral: coral-ui measures 3.58:1 on cream-50, under the 4.5:1 text minimum */
@media (max-width: 767px) {
  .aa-rewards__table thead { display: none; }
  .aa-rewards__table, .aa-rewards__table tbody, .aa-rewards__table tr, .aa-rewards__table td { display: block; inline-size: 100%; }
  .aa-rewards__table tr { padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); }
  .aa-rewards__table td { display: flex; justify-content: space-between; border: 0; padding-block: 4px; text-align: end; }
  .aa-rewards__table td::before { color: var(--color-text-muted); font-size: var(--fs-xs); text-align: start; }
  .aa-rewards__table td:nth-child(1)::before { content: "Date"; }
  .aa-rewards__table td:nth-child(2)::before { content: "Activity"; }
  .aa-rewards__table td:nth-child(3)::before { content: "Points"; }
  .aa-rewards__table td:nth-child(4)::before { content: "Balance"; }
}

/* Orders table, Addresses, Details: Field/Input treatment (04-forms) + kit primary buttons. */
.woocommerce-account .woocommerce-orders-table th { font-size: 10px; letter-spacing: 0.09em; background: var(--cream-50); }
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { padding: 6px 12px; min-block-size: var(--touch-target-min); font-size: var(--fs-xs); }
.woocommerce-account .woocommerce-MyAccount-content .form-row label { font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.woocommerce-account .woocommerce-MyAccount-content .form-row .input-text { block-size: 48px; border: 0; border-radius: var(--radius-sm); box-shadow: var(--elevation-hairline); background: var(--surface-white); padding-inline: 12px; font-size: 15px; }
.woocommerce-account .woocommerce-MyAccount-content .form-row .input-text:focus-visible { outline: none; border-color: var(--color-focus-outline); box-shadow: 0 0 0 3px var(--focus-ring-tint), 0 0 0 1px var(--color-focus-outline); /* :focus-visible and --color-focus-outline ensure 3:1 non-text contrast meets WCAG minimum */ }
.woocommerce-account .woocommerce-MyAccount-content fieldset legend { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; color: var(--color-text); }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address { background: var(--surface-white); border-radius: var(--radius-panel); box-shadow: var(--elevation-hairline); padding: var(--space-4); }
.woocommerce-account .woocommerce-Address-title h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; }
.woocommerce-account .woocommerce-Address-title .edit { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--gold-text-on-white); }

/* --------------------------------------------------------------------------
   The sign-in plugin's account markup, now that its account.css is not loaded
   (inc/signin.php). That sheet boxed the content column in a bordered cream
   panel and set Jost on nav, headings, tables and labels; the rules above
   already restyle all of those, so only what it alone provided is restated.

   `.aa-account-greeting` ("Welcome back, Sam · 1,240 points · AED 12.40") is
   printed at the end of the dashboard by the plugin. WooCommerce's "Hello" line
   already greets the customer by name and the points card at the top states
   the balance, so the plugin's block is hidden here the same way the
   Rewards tab's duplicate summary is (spec §6.5). Styled anyway, so that if it
   is ever shown it reads as part of the account design.
   -------------------------------------------------------------------------- */
.aa-rewards { font-family: var(--font-sans); color: var(--color-text-body); }
.woocommerce-account .woocommerce-MyAccount-content .aa-account-greeting { display: none; }
.aa-account-greeting {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  margin-block: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  background: var(--surface-white); border-radius: var(--radius-panel); box-shadow: var(--elevation-hairline);
  font-family: var(--font-sans);
}
.aa-account-greeting__mark img { display: block; inline-size: 40px; block-size: 40px; border-radius: 8px; object-fit: contain; }
.aa-account-greeting__text { display: flex; flex-direction: column; min-inline-size: 0; }
.aa-account-greeting__ar { display: none; } /* English-only release */
.aa-account-greeting__en { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; line-height: 1.2; color: var(--color-text); }
.aa-account-greeting__points { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.aa-account-greeting__n { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text); }
.aa-account-greeting__k { font-size: var(--fs-xs); color: var(--color-text-muted); }
.aa-account-greeting__k .woocommerce-Price-amount { color: inherit; }
@media (max-width: 600px) {
  .aa-account-greeting__points { margin-inline-start: 0; align-items: flex-start; text-align: start; inline-size: 100%; }
}

/* Ledger colour and rules, at a strength that holds. `.woocommerce-account
   .woocommerce-orders-table td` (0,2,1, above) sets every cell to body ink and
   outranked the credit/debit colours, so earned and spent points read the
   same. hello-elementor's table defaults add a 1px rule round every cell and
   stripe odd rows; the ledger spec is horizontal rules only. */
.woocommerce-account .aa-rewards__table td.is-credit { color: var(--color-success-deep); }
.woocommerce-account .aa-rewards__table td.is-debit  { color: var(--coral-700); }
.woocommerce-account .aa-rewards__table th.aa-num { text-align: end; } /* headers over the numbers they label */
.woocommerce-account .aa-rewards__table th, .woocommerce-account .aa-rewards__table td,
.woocommerce-account .woocommerce-orders-table th, .woocommerce-account .woocommerce-orders-table td { border-inline: 0; border-block-start: 0; }
.woocommerce-account .aa-rewards__table tbody > tr:nth-child(odd) > td,
.woocommerce-account .woocommerce-orders-table tbody > tr:nth-child(odd) > td { background-color: transparent; }

/* Dashboard "Points activity" preview: the same horizontal-rules-only ledger as the Rewards tab.
   hello-elementor's reset rules every cell and tints odd rows; 08's even-row fill made a second stripe. */
.woocommerce-account .aly-ledger-table th, .woocommerce-account .aly-ledger-table td { border-inline: 0; border-block-start: 0; }
.woocommerce-account .aly-ledger-table tbody > tr > td, .woocommerce-account .aly-ledger-table tbody > tr:nth-child(n) { background-color: transparent; }
.woocommerce-account .aly-ledger-table td.aly-ledger-table__amount--credit { color: var(--color-success-deep); }
.woocommerce-account .aly-ledger-table td.aly-ledger-table__amount--debit { color: var(--coral-700); }