/* ==========================================================================
   fimart — member area (My Account)
   Loaded only on account screens by inc/account.php.

   Colour comes from the design tokens declared at the top of style.css
   (--brand-*, --ink, --paper, --mist, --mist-2, --line, --muted, --danger,
    --star, --sp-*, --radius*, --shadow*).

   The status chips and the approval notice need pale tints of those brand
   colours, which style.css does not declare. Rather than hardcode the tints,
   this module declares its own --fi-chip-* / --fi-notice-* tokens below and
   derives them from the brand tokens with color-mix(). Every colour a chip uses
   — background, border AND text — is declared in that one block, so retuning
   --brand-green / --brand-blue / --star / --danger moves a chip's background
   and border with its text instead of leaving them on the old hue. The plain
   :root block holds the pre-computed fallbacks for engines without color-mix.
   No global restyling: every selector here is scoped to .fi-acct* / .fi-auth /
   .fi-chip, all of which are this module's own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Module tokens — status tints.
   Fallback values first (they are what every chip rendered before these tokens
   existed), then the color-mix derivations for engines that support them.
   -------------------------------------------------------------------------- */
:root {
  --fi-chip-ok-bg:     #EAF5E0;
  --fi-chip-ok-line:   #CFE7BA;
  --fi-chip-ok-ink:    var(--brand-green-deep);
  --fi-chip-info-bg:   #E6F1FA;
  --fi-chip-info-line: #C6DEF2;
  --fi-chip-info-ink:  var(--brand-blue-deep);
  --fi-chip-wait-bg:   #FEF3DC;
  --fi-chip-wait-line: #F6DFAE;
  --fi-chip-wait-ink:  #8A6100;
  --fi-chip-bad-bg:    #FBE9E7;
  --fi-chip-bad-line:  #F3CFCA;
  --fi-chip-bad-ink:   var(--danger);
  --fi-chip-brand-ink: var(--paper);
  --fi-notice-wait-bg: #FFFBF2;
  --fi-notice-bad-bg:  #FDF3F2;
}

@supports (background: color-mix(in srgb, red 50%, white)) {
  :root {
    --fi-chip-ok-bg:     color-mix(in srgb, var(--brand-green) 15%, var(--paper));
    --fi-chip-ok-line:   color-mix(in srgb, var(--brand-green) 36%, var(--paper));
    --fi-chip-info-bg:   color-mix(in srgb, var(--brand-blue) 10%, var(--paper));
    --fi-chip-info-line: color-mix(in srgb, var(--brand-blue) 24%, var(--paper));
    --fi-chip-wait-bg:   color-mix(in srgb, var(--star) 14%, var(--paper));
    --fi-chip-wait-line: color-mix(in srgb, var(--star) 37%, var(--paper));
    --fi-chip-wait-ink:  color-mix(in srgb, var(--star) 57%, #000);
    --fi-chip-bad-bg:    color-mix(in srgb, var(--danger) 11%, var(--paper));
    --fi-chip-bad-line:  color-mix(in srgb, var(--danger) 25%, var(--paper));
    --fi-notice-wait-bg: color-mix(in srgb, var(--star) 5%, var(--paper));
    --fi-notice-bad-bg:  color-mix(in srgb, var(--danger) 6%, var(--paper));
  }
}

/* --------------------------------------------------------------------------
   TT-13 — the "Masuk" button escaping the login card.

   Root cause (both axes), from WooCommerce core CSS:
     woocommerce.css  .woocommerce .woocommerce-form-login .woocommerce-form-login__submit
                      { float: left; margin-right: 1em }
   combined with the theme's `.fi-auth .fi-btn { width: 100% }`:
     - horizontally: a 100%-wide box plus a 1em right margin is 1em wider than
       its container, so the button pushes out past the card's right edge;
     - vertically: `float:left` takes the (last) child out of flow, so the card
       no longer grows to contain it and the button hangs below the card.
   The fix removes the inherited float and margin — it does NOT add a
   compensating margin. We also drop core's own border/padding on form.login,
   which was drawing a second card inside ours.
   -------------------------------------------------------------------------- */
.woocommerce .fi-auth form.login,
.woocommerce .fi-auth form.register {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.woocommerce .fi-auth .woocommerce-form-login__submit,
.woocommerce .fi-auth .woocommerce-form-register__submit,
.fi-auth .fi-auth__submit {
  float: none;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.fi-auth__submit { display: block; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.fi-acct {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

/* WooCommerce core floats the two columns (30% / 68%). Undo it — we use grid. */
.woocommerce-account .fi-acct .woocommerce-MyAccount-navigation,
.woocommerce-account .fi-acct .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

.fi-acct__content { min-width: 0; }

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */
.fi-acct-nav {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  position: sticky;
  top: var(--sp-8);
}

.fi-acct-nav__id {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.fi-acct-nav__avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist-2);
  color: var(--brand-green-deep);
  font-weight: 700; font-size: 1rem;
}
.fi-acct-nav__who { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.fi-acct-nav__name {
  font-size: .92rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fi-acct-nav__list { list-style: none; margin: 0; padding: 0; }
.fi-acct-nav__list li { margin: 0; }
.fi-acct-nav__list a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: .6em .7em;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.fi-acct-nav__list a:hover { background: var(--mist); color: var(--brand-green-deep); }
.fi-acct-nav__list .is-active > a {
  background: var(--mist-2);
  color: var(--brand-green-deep);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand-green);
}
.fi-acct-nav__list .woocommerce-MyAccount-navigation-link--customer-logout > a { color: var(--muted); }
.fi-acct-nav__list .woocommerce-MyAccount-navigation-link--customer-logout > a:hover { color: var(--danger); }

.fi-acct-nav__icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; }

/* Mobile disclosure — revealed by account.js (hidden attribute removed). */
.fi-acct-nav__toggle {
  display: none;
  width: 100%;
  align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  background: var(--mist);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: .65em .9em;
  font-size: .92rem; font-weight: 600;
}
.fi-acct-nav__caret {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.fi-acct-nav__toggle[aria-expanded="true"] .fi-acct-nav__caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* --------------------------------------------------------------------------
   Screen frame + headings
   -------------------------------------------------------------------------- */
.fi-acct-screen { display: flex; flex-direction: column; gap: var(--sp-6); }
.fi-acct-screen__head { margin: 0; }
.fi-acct-screen__title { font-size: 1.25rem; margin: 0 0 var(--sp-2); }
.fi-acct-screen__sub { color: var(--muted); font-size: .92rem; margin: 0; }

.fi-acct-hello {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.fi-acct-hello__title { font-size: 1.35rem; margin: 0 0 var(--sp-1); font-weight: 500; }
.fi-acct-hello__title strong { font-weight: 700; }
.fi-acct-hello__sub { color: var(--muted); font-size: .92rem; margin: 0; }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.fi-chip {
  display: inline-flex; align-items: center;
  padding: .22em .7em;
  border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  letter-spacing: .01em; white-space: nowrap;
  background: var(--mist-2); color: var(--muted);
  border: 1px solid transparent;
}
.fi-chip--lg { font-size: .8rem; padding: .35em .9em; }
.fi-chip--ok     { background: var(--fi-chip-ok-bg);   color: var(--fi-chip-ok-ink);   border-color: var(--fi-chip-ok-line); }
.fi-chip--info   { background: var(--fi-chip-info-bg); color: var(--fi-chip-info-ink); border-color: var(--fi-chip-info-line); }
.fi-chip--wait   { background: var(--fi-chip-wait-bg); color: var(--fi-chip-wait-ink);  border-color: var(--fi-chip-wait-line); }
.fi-chip--bad    { background: var(--fi-chip-bad-bg);  color: var(--fi-chip-bad-ink);   border-color: var(--fi-chip-bad-line); }
.fi-chip--muted  { background: var(--mist-2); color: var(--muted);      border-color: var(--line); }
.fi-chip--brand  { background: var(--brand-green); color: var(--fi-chip-brand-ink); }

/* --------------------------------------------------------------------------
   Approval / status notice
   -------------------------------------------------------------------------- */
.fi-acct-notice {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--mist);
  padding: var(--sp-4) var(--sp-5);
}
.fi-acct-notice strong { display: block; margin-bottom: var(--sp-1); font-size: .96rem; }
.fi-acct-notice p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.fi-acct-notice--wait { border-left-color: var(--star); background: var(--fi-notice-wait-bg); }
.fi-acct-notice--bad  { border-left-color: var(--danger); background: var(--fi-notice-bad-bg); }

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */
.fi-acct-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3);
}
.fi-acct-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-width: 0;
}
.fi-acct-stat__label {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.fi-acct-stat__value {
  font-size: 1.3rem; font-weight: 700; color: var(--ink); line-height: 1.25;
  overflow-wrap: anywhere;
}
.fi-acct-stat__value .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.fi-acct-stat--wide .fi-acct-stat__value { color: var(--brand-green-deep); }

/* --------------------------------------------------------------------------
   Blocks
   -------------------------------------------------------------------------- */
.fi-acct-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.fi-acct-block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.fi-acct-block__title { font-size: 1rem; margin: 0; }
.fi-acct-block > .fi-acct-block__title { margin-bottom: var(--sp-4); }
.fi-acct-block__more { font-size: .86rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   Quick actions
   -------------------------------------------------------------------------- */
.fi-acct-actions {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
}
.fi-acct-action {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--mist);
  color: var(--ink);
  font-size: .9rem; font-weight: 500;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.fi-acct-action:hover {
  border-color: var(--brand-green);
  background: var(--mist-2);
  color: var(--brand-green-deep);
  transform: translateY(-2px);
}
.fi-acct-action .fi-acct-nav__icon { width: 20px; height: 20px; opacity: .9; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.fi-acct-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fi-acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.fi-acct-table th,
.fi-acct-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.fi-acct-table thead th {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  border-bottom-width: 1px;
  white-space: nowrap;
}
.fi-acct-table tbody tr:last-child td { border-bottom: 0; }
.fi-acct-table tbody tr:hover { background: var(--mist); }
.fi-acct-table .is-num { text-align: right; white-space: nowrap; }
.fi-acct-table .is-action { text-align: right; width: 1%; white-space: nowrap; }
.fi-acct-table a { font-weight: 600; }
.fi-acct-table__date { display: block; }
.fi-acct-table__hint { display: block; font-size: .72rem; color: var(--muted); }
.fi-acct-table .woocommerce-Price-amount { font-weight: 600; color: var(--price); }

.fi-btn--sm { padding: .45em .9em; font-size: .8rem; }

/* Total-spent summary strip (payment history) */
.fi-acct-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  background: var(--mist-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.fi-acct-total__label {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.fi-acct-total__value { font-size: 1.3rem; font-weight: 700; color: var(--brand-green-deep); }
.fi-acct-total__value .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Pager
   -------------------------------------------------------------------------- */
.fi-acct-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4);
}
.fi-acct-pager__pos { font-size: .85rem; color: var(--muted); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */
.fi-acct-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  background: var(--mist);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.fi-acct-empty__title { font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-2); }
.fi-acct-empty p { color: var(--muted); font-size: .9rem; max-width: 46ch; margin-inline: auto; }
.fi-acct-empty .fi-btn { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   Addresses
   -------------------------------------------------------------------------- */
.fi-acct-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.fi-acct-address {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  background: var(--mist);
}
.fi-acct-address__title { font-size: .8rem; margin: 0 0 var(--sp-2); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fi-acct-address address { font-style: normal; font-size: .9rem; line-height: 1.7; color: var(--ink); }
.fi-acct-address__empty { font-size: .9rem; color: var(--muted); margin: 0; }
.fi-acct-address__edit { display: inline-block; margin-top: var(--sp-3); font-size: .86rem; font-weight: 500; }

.fi-acct-signout { font-size: .86rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   WooCommerce's own account screens inside our shell
   (orders table, edit-account / edit-address forms)
   -------------------------------------------------------------------------- */
.fi-acct__content .woocommerce-MyAccount-content > h2,
.fi-acct__content legend { font-size: 1.1rem; }
.fi-acct__content table.shop_table { width: 100%; background: var(--paper); }
.fi-acct__content .woocommerce-Address { margin-bottom: var(--sp-5); }
.fi-acct__content form .form-row { margin-bottom: var(--sp-3); }
.fi-acct__content .woocommerce-EditAccountForm fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); margin: var(--sp-5) 0; }

/* --------------------------------------------------------------------------
   Responsive — tested at 1366px and 390px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .fi-acct { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-5); }
  .fi-acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .fi-acct { grid-template-columns: 1fr; gap: var(--sp-4); }
  .fi-acct-nav { position: static; padding: var(--sp-3); }
  .fi-acct-nav--js .fi-acct-nav__toggle { display: flex; }
  .fi-acct-nav--js .fi-acct-nav__list { display: none; margin-top: var(--sp-2); }
  .fi-acct-nav--js.is-open .fi-acct-nav__list { display: block; }
  .fi-acct-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-acct-addresses { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fi-acct-block { padding: var(--sp-4); }
  .fi-acct-actions { grid-template-columns: 1fr; }
  .fi-acct-hello__title { font-size: 1.15rem; }

  /* Tables become stacked cards — no horizontal scrolling at 390px. */
  .fi-acct-tablewrap { overflow-x: visible; }
  .fi-acct-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .fi-acct-table, .fi-acct-table tbody, .fi-acct-table tr, .fi-acct-table td { display: block; width: auto; }
  .fi-acct-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--paper);
  }
  .fi-acct-table tbody tr:hover { background: var(--paper); }
  .fi-acct-table td {
    border-bottom: 0;
    padding: .3em 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    text-align: right;
  }
  .fi-acct-table td::before {
    content: attr(data-label);
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
    text-align: left; flex: 0 0 auto;
  }
  /* `width: 1%` shrink-wraps the action cell in the desktop TABLE layout; left in
     place here it collapses the stacked cell to ~3px and a flex-end button then
     spills out of the card to the left. Reset it with the layout. */
  .fi-acct-table td.is-action { width: auto; justify-content: flex-end; padding-top: var(--sp-3); }
  .fi-acct-table td.is-action::before { content: none; }
  .fi-acct-table .is-num { text-align: right; }
  .fi-acct-stats { grid-template-columns: 1fr 1fr; }
  .fi-acct-stat__value { font-size: 1.15rem; }
  .fi-acct-total { flex-direction: column; gap: var(--sp-1); }
}