/*
 * Avista Commerce — My Account UI (IÐNÚ-derived dashboard, Scheme C / brown).
 *
 * A theme-overridable FALLBACK skin: every colour, font and radius is driven
 * from steindal's Breakdance `--bde-*` design tokens, with sensible fallbacks so
 * it still renders standalone (bare site / breakdance-zero / innbak). A theme
 * that ships its own myaccount templates renders different markup and these
 * `.acma-*` rules simply no-op; a theme that only retokens gets reskinned for
 * free. Derived shades use color-mix so they track whatever ink/gold the theme
 * sets. Enqueued on is_account_page() as handle `acma-account`.
 */

/* ---- Base tokens: FALLBACKS ONLY, and they must live at :root -------------
 *
 * Fallbacks are AVISTA CORE's design system — `assets/css/tokens.css`, the set
 * the wp-login.php mask renders against: --grey-900 ink, --indigo-600 accent,
 * --grey-100 page. A Breakdance host still overrides via its own --bde-* tokens
 * (steindal → Scheme C brown), so these show only where a site has no palette
 * of its own.
 *
 * **They used to be IÐNÚ's warm ink / red / cream.** Owner, 2026-09-18:
 * *"the red should not be the default, idnu was just a reference at the time.
 * The truth should be the core's design colour scheme"*. That client was the
 * reference when this set was drawn, and a reference client's brand is the wrong
 * thing for every other site to fall back to — it was rendering IÐNÚ's red on
 * the dev bed and on any site without a brand token.
 *
 * This is also what keeps the sign-in card consistent with its guests:
 * avista-erp-onboarding's `[avista_account]` renders INSIDE `.acma-login__card`
 * at step 2c and falls back to the same Core values, so the two agreed on shape
 * but not on colour for as long as these three literals differed.
 *
 * ── Why :root and not the surface list (fixed 2026-09-21) ───────────────────
 *
 * These five sat on `.acma-account, .acma-dashboard, .acma-subusers, .acma-login`
 * and therefore could never be overridden. Avista Core publishes the site's
 * imported palette as `:root { --acma-* }` through `Assets::add_design_tokens()`,
 * appended to THIS stylesheet's handle so it lands after this file and wins at
 * equal specificity — but a class selector beats `:root` for anything inside it,
 * so every ACMA surface re-derived its base colours from `--bde-*` and Core's
 * import never reached one of them.
 *
 * Measured on ison.avista.dev: `--acma-accent` was `#1a1717` at `:root`, the
 * value Core imported from the site's own primary button, and `#3b82f6` on
 * `.acma-login` — Breakdance's STOCK `--blue-500`, which it emits because that
 * site's Brand slot is blank. The sign-in button was Tailwind blue on a
 * black-and-blue site. Reported as "why is the button using the link color?" —
 * it was not the link colour (#72a6ed), it was Breakdance's fallback brand.
 *
 * At `:root` these are what they were always described as: fallbacks for a site
 * with no palette, beaten by Core's block wherever there is one.
 *
 * The derived shades and the radii below deliberately STAY on the surfaces:
 *   - the shades are `color-mix()` of whatever base token is in scope, so they
 *     follow Core's values automatically once the base ones do;
 *   - the radii read `--bde-*` DIRECTLY and must keep doing so, because Core's
 *     provider imports no radius at all — `radius-card/nav/btn` are always its
 *     own authored defaults, so letting them win would replace the site's real
 *     corner radii with 14/6/8px.
 * ------------------------------------------------------------------------- */
:root {
  --acma-ink: var(--bde-body-text-color, #1d2327);
  --acma-accent: var(--bde-brand-primary-color, #3858e9);
  --acma-page: var(--bde-background-color, #f0f0f1);
  --acma-card-bg: #fff;
  --acma-font: var(--bde-body-font-family, "Figtree", system-ui, sans-serif);
}

.acma-account,
.acma-dashboard,
.acma-subusers,
.acma-login {
  --acma-line: color-mix(in srgb, var(--acma-ink) 12%, transparent);
  --acma-muted: color-mix(in srgb, var(--acma-ink) 55%, transparent);
  --acma-faint: color-mix(in srgb, var(--acma-ink) 40%, transparent);
  --acma-paper: color-mix(in srgb, var(--acma-ink) 6%, var(--acma-card-bg));
  --acma-hover: color-mix(in srgb, var(--acma-ink) 4%, var(--acma-card-bg));
  --acma-accent-tint: color-mix(in srgb, var(--acma-accent) 24%, var(--acma-card-bg));
  --acma-accent-ink: color-mix(in srgb, var(--acma-accent) 55%, var(--acma-ink));
  /* Readable ink ON the accent, for a solid button. Not hardcoded white: a light
     accent needs dark text, and `contrast-color()` is not shipping yet. */
  --acma-on-accent: color-mix(in srgb, var(--acma-card-bg) 92%, var(--acma-accent));

  --acma-radius-card: var(--bde-woo-wrappers__border-radius, 12px);
  --acma-radius-nav: var(--bde-woo-buttons-and-links__nav-border-radius, 6px);
  --acma-radius-btn: var(--bde-button-border-radius, 8px);

  font-family: var(--acma-font);
  color: var(--acma-ink);
}

.acma-account *,
.acma-dashboard *,
.acma-subusers *,
.acma-login * {
  box-sizing: border-box;
}

/* ---- Two-column shell ---------------------------------------------------- */
/* 12-column grid like the source design (sidebar col-span-3 / main col-span-9),
   so the sidebar is a PROPORTION of the width (~25%), not a frozen pixel width —
   labels like "Pantanir" / "Upplýsingar um reikning" get room as the page widens. */
.acma-account {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  width: 100%;
}

.acma-account__sidebar {
  grid-column: span 3;
}

.acma-account__main {
  grid-column: span 9;
}

/* In-scope AJAX navigation (account.js): dim the area while the next view loads. */
.acma-account.acma-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/*
 * Use more of the page width than the host's default section cap. Two parts:
 *
 * 1) Widen the section that holds the dashboard beyond Breakdance's default
 *    1440px cap. Breakdance sizes sections with `max-width: var(--bde-section-width)`,
 *    so we override that VARIABLE on the scoped element (rather than fight the
 *    max-width rule's specificity) — it recomputes through Breakdance's own rule.
 *    Scoped via :has so only this section grows — header/footer/other pages keep
 *    the theme width — and so it no-ops on a theme that overrides the account
 *    templates (no .acma-account → no match). Caps to the viewport on small screens.
 *
 * 2) WooCommerce wraps the content in a `display:flex` `.woocommerce` div, so a
 *    grid child sizes to its CONTENT, not the container — leaving dead space on
 *    the right. Force the wrapper + grid to fill the (now wider) section.
 */
.section-container:has(.acma-account) {
  --bde-section-width: min(1680px, calc(100vw - 96px));
}

.woocommerce:has(> .acma-account) {
  width: 100%;
}

/* Neutralise WooCommerce's default floated my-account layout. WC ships
   `.woocommerce-account .woocommerce-MyAccount-navigation/-content { float; width:% }`
   (specificity 0,2,0); our resets use 0,3,0 so they win regardless of load order.
   The nav needs an explicit width:100% — width:auto won't stretch the flex item,
   leaving the nav card stuck at WC's percentage width and clipping the labels. */
.acma-account .acma-account__sidebar .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
  margin: 0;
}

.acma-account .acma-account__main.woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

.acma-account__sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acma-account__card {
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-card);
}

/* ---- Profile card -------------------------------------------------------- */
.acma-account__profile-card {
  padding: 16px;
}

.acma-account__profile {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acma-account__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acma-paper);
  color: var(--acma-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.acma-account__profile-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acma-account__profile-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acma-account__profile-sub {
  font-size: 12px;
  color: var(--acma-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acma-account__profile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--acma-line);
  font-size: 12px;
  color: var(--acma-muted);
}

.acma-account__since {
  font-weight: 500;
  color: var(--acma-ink);
}

/* ---- Navigation ---------------------------------------------------------- */
.acma-nav.woocommerce-MyAccount-navigation {
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-card);
  padding: 6px;
  font-size: 14px;

  /* Breakdance renders the Woo nav from its own variables (with selectors that
     outrank ours); drive them so it paints Scheme C itself. */
  --bde-woo-buttons-and-links__nav-link-color: var(--acma-muted);
  --bde-woo-buttons-and-links__nav-link-color-active: var(--acma-card-bg);
  --bde-woo-buttons-and-links__nav-link-background-active: var(--acma-ink);
}

.acma-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acma-nav li {
  margin: 1px 0;
  border: 0;
}

.acma-nav li a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--acma-radius-nav);
  color: var(--acma-muted);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-nav__icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.acma-nav__label {
  flex: 1 1 auto;
  min-width: 0;
}

.acma-nav__badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--acma-muted);
  background: var(--acma-paper);
  padding: 1px 8px;
  border-radius: 10px;
}

/* Hover. The scoped selector is the active pill's (0,4,3): Breakdance's
   `.breakdance-woocommerce .woocommerce-MyAccount-navigation ul li a:hover` (0,3,3)
   paints its primary hover colour with text-on-primary, and on a site whose Brand
   slot is blank that is Breakdance's stock blue with white text. No !important, so
   the active pill below still wins on the page you are on. */
.acma-nav li a:hover,
.acma-account .acma-nav.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--acma-hover);
  color: var(--acma-ink);
}

/* Active pill. High specificity (0,4,3) to beat Breakdance's
   `.breakdance-woocommerce .woocommerce-MyAccount-navigation ul li.is-active a`
   (0,3,3); !important guards against load-order ties. */
.acma-account .acma-nav.woocommerce-MyAccount-navigation ul li.is-active a,
.acma-account .acma-nav.woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
  background-color: var(--acma-ink) !important;
  color: var(--acma-card-bg) !important;
}

.acma-nav li.is-active a .acma-nav__badge,
.acma-nav li a[aria-current="page"] .acma-nav__badge {
  color: var(--acma-card-bg);
  background: color-mix(in srgb, var(--acma-card-bg) 22%, transparent);
}

/* ---- Dashboard header ---------------------------------------------------- */
.acma-dash__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.acma-dash__eyebrow {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--acma-accent-ink);
}

.acma-dash__title {
  margin: 6px 0 0;
  font-family: var(--acma-font);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--acma-ink);
}

.acma-dash__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- Theme link-colour leak override ------------------------------------- */
/* The host Breakdance theme recolours content-area `.woocommerce a` links to a
   pale tint via `color` alone — specificity (0,1,1), no !important, and
   -webkit-text-fill-color then defaults to that currentColor. That beats these
   single-class `.acma-*` link rules and leaves order links, filter pills and
   button labels near-unreadable (pale blue on cream). Re-assert each element's
   own RESTING colour at (0,2,0) via the `.acma-account` scope, which clears the
   theme the same way its own is-active pill does. Deliberately placed before the
   component rules: the existing (0,2,0) :hover / .is-active rules come later and
   win the tie, so those states stay intact. Nav links already win via their own
   (0,1,2) rule; the `.acma-action` row controls have their own override. On a
   theme with no such leak these are harmless no-ops (same values as the base
   rules). Mirrors the nav active-pill override earlier in this file. */
.acma-account .acma-btn { color: var(--acma-ink); }
.acma-account .acma-btn--solid,
.acma-account .acma-btn--primary { color: var(--acma-card-bg); }
.acma-account .acma-order-id,
.acma-account .acma-card__link { color: var(--acma-ink); }
.acma-account .acma-orders-table__view { color: var(--acma-muted); }
.acma-account .acma-pill { color: var(--acma-muted); }
.acma-account .acma-addr-notice__link { color: var(--acma-accent-ink); }

/* ---- Buttons ------------------------------------------------------------- */
.acma-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--acma-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  padding: 9px 15px;
  border-radius: var(--acma-radius-btn);
  border: 1px solid var(--acma-line);
  color: var(--acma-ink);
  background: var(--acma-card-bg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acma-btn:hover {
  border-color: color-mix(in srgb, var(--acma-ink) 30%, transparent);
}

/* The primary action is the ACCENT, not the ink — changed 2026-09-15.
 *
 * It was `--acma-ink`, so on a site whose ink is near-black the main call to
 * action rendered as a black slab beside that site's own brand-coloured buttons.
 * `--acma-btn-solid-bg` is the escape hatch for a site that wants the mono look
 * back without editing this file. */
.acma-btn--solid {
  background: var(--acma-btn-solid-bg, var(--acma-accent));
  border-color: var(--acma-btn-solid-bg, var(--acma-accent));
  color: var(--acma-on-accent, var(--acma-card-bg));
}

.acma-btn--solid:hover {
  background: color-mix(in srgb, var(--acma-btn-solid-bg, var(--acma-accent)) 85%, #000);
  border-color: color-mix(in srgb, var(--acma-btn-solid-bg, var(--acma-accent)) 85%, #000);
  color: var(--acma-on-accent, var(--acma-card-bg));
}

/*
 * The resend button spends most of its life disabled — a live code is already in
 * the visitor's inbox — so it has to read as "not yet" rather than as broken.
 * Quiet, not greyed into invisibility; the countdown beside it says why.
 */
.acma-btn--quiet[disabled] {
  /*
   * Grey the BORDER too, not just the fill. `.acma-btn--ghost` is an accent
   * outline, and dimming it with opacity alone leaves a washed-out brand colour
   * that still reads as "press me" — the outline is the whole button here.
   */
  color: var(--acma-muted, #6b7280);
  border-color: var(--acma-line, #d1d5db);
  background: transparent;
  opacity: .7;
  cursor: default;
  pointer-events: none;
}

.acma-btn--quiet[disabled]:hover {
  color: var(--acma-muted, #6b7280);
  border-color: var(--acma-line, #d1d5db);
  background: transparent;
}

.acma-login__sent--error {
  border-color: var(--acma-danger, #b5202a);
  color: var(--acma-danger, #b5202a);
}

.acma-login__resend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.acma-login__countdown {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--acma-muted, #6b7280);
  text-align: center;
}

.acma-login__countdown.is-expired {
  color: var(--acma-danger, #b5202a);
}

.acma-btn--ghost {
  padding: 5px 12px;
  border-color: var(--acma-accent);
}

.acma-btn--ghost:hover {
  background: var(--acma-accent);
  border-color: var(--acma-accent);
  color: var(--acma-card-bg);
}

/* Prominent CTA (the comp's solid button, e.g. "Bæta við heimilisfangi"). Uses the
   ink fill — like the account area's other solids — not the raw accent, which on a
   light-accent theme (steindal's gold #BCA97F) would be far too low-contrast. */
.acma-btn--primary {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  background: var(--acma-ink);
  border-color: var(--acma-ink);
  color: var(--acma-card-bg);
}

.acma-btn--primary:hover {
  background: color-mix(in srgb, var(--acma-ink) 85%, #000);
  border-color: color-mix(in srgb, var(--acma-ink) 85%, #000);
  color: var(--acma-card-bg);
}

/* ---- KPI cards ----------------------------------------------------------- */
.acma-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.acma-card {
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-card);
}

.acma-kpi {
  padding: 16px;
}

.acma-kpi__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--acma-muted);
}

.acma-kpi__delta {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--acma-paper);
  color: var(--acma-muted);
  letter-spacing: 0;
}

.acma-kpi__delta--up {
  background: var(--acma-accent-tint);
  color: var(--acma-accent-ink);
}

.acma-kpi__delta--down {
  background: color-mix(in srgb, #b3261e 14%, var(--acma-card-bg));
  color: #8a1d17;
}

.acma-kpi__value {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.acma-kpi__sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Recent orders card -------------------------------------------------- */
.acma-recent-orders {
  padding: 18px 20px 8px;
}

.acma-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.acma-card__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-card__link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acma-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--acma-accent);
  white-space: nowrap;
}

.acma-card__link:hover {
  color: var(--acma-accent-ink);
}

.acma-empty {
  color: var(--acma-muted);
  padding: 6px 0 14px;
}

.acma-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.acma-orders-table thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--acma-faint);
  padding: 4px 8px 8px;
}

.acma-orders-table tbody td {
  padding: 11px 8px;
  border-top: 1px solid var(--acma-line);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.acma-orders-table .acma-num {
  text-align: right;
}

.acma-order-id {
  font-weight: 500;
  color: var(--acma-ink);
  text-decoration: none;
}

.acma-order-id:hover {
  color: var(--acma-accent-ink);
}

.acma-placed-by {
  display: block;
  font-size: 11px;
  color: var(--acma-muted);
}

/* Customer kennitala sub-line under the customer name (Mínar sölur). */
.acma-cust-ssn {
  display: block;
  font-size: 11px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

/* Salesperson sales overview block on the dashboard (below own order history). */
.acma-sales-overview {
  margin-top: 24px;
}
.acma-sales-overview__kpis {
  margin-bottom: 16px;
}

/* ---- Status pills -------------------------------------------------------- */
.acma-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 11px;
  background: var(--acma-paper);
  color: var(--acma-muted);
  white-space: nowrap;
}

/* Colour-coded dot before the label (inherits the pill's text colour), as in the design. */
.acma-status::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.acma-status--processing,
.acma-status--pending,
.acma-status--on-hold {
  background: var(--acma-accent-tint);
  color: var(--acma-accent-ink);
}

.acma-status--completed {
  background: color-mix(in srgb, var(--acma-ink) 10%, var(--acma-card-bg));
  color: var(--acma-ink);
}

.acma-status--cancelled,
.acma-status--failed,
.acma-status--refunded {
  background: color-mix(in srgb, #b3261e 12%, var(--acma-card-bg));
  color: #8a1d17;
}

/* Ledger (Reikningar) invoice status. Semantic, theme-independent colours so the
   meaning reads the same on every host (matches the comp): paid = green, due
   (unpaid, within terms) = amber, overdue = red. */
.acma-status--paid {
  background: color-mix(in srgb, #1e7d4f 13%, var(--acma-card-bg));
  color: #1a6b43;
}

.acma-status--due {
  background: color-mix(in srgb, #c2860b 16%, var(--acma-card-bg));
  color: #8a5d06;
}

.acma-status--overdue {
  background: color-mix(in srgb, #b3261e 13%, var(--acma-card-bg));
  color: #8a1d17;
}

/* ---- Orders list page (Pantanir) ----------------------------------------- */
.acma-ofilter {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.acma-ofilter__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* The search input + sort select are NOT wrapped in a <form> (see the template)
   so Breakdance's `.woocommerce form …` field styling can't reach them; scoped
   here to override BD's generic input styling. */
.acma-ofilter .acma-ofilter__search,
.acma-ofilter .acma-ofilter__sort {
  font-family: var(--acma-font);
  font-size: 13.5px;
  color: var(--acma-ink);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 9px 12px;
  margin: 0;
  box-sizing: border-box;
}

.acma-ofilter .acma-ofilter__search {
  flex: 1 1 240px;
  min-width: 0;
  width: auto;
  max-width: none;
  background: var(--acma-paper);
}

.acma-ofilter .acma-ofilter__sort {
  flex: 0 0 auto;
  width: auto;
  background: var(--acma-card-bg);
  cursor: pointer;
}

.acma-ofilter .acma-ofilter__search:focus,
.acma-ofilter .acma-ofilter__sort:focus {
  outline: none;
  border-color: var(--acma-accent);
}

.acma-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acma-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acma-muted);
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: 999px;
  padding: 5px 13px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acma-pill:hover {
  border-color: color-mix(in srgb, var(--acma-ink) 30%, transparent);
  color: var(--acma-ink);
}

.acma-pill__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--acma-faint);
}

.acma-pill.is-active {
  background: var(--acma-ink);
  border-color: var(--acma-ink);
  color: var(--acma-card-bg);
}

.acma-pill.is-active .acma-pill__count {
  color: color-mix(in srgb, var(--acma-card-bg) 60%, transparent);
}

.acma-orders-list {
  padding: 6px 20px 14px;
}

.acma-orders-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.acma-orders-table__view {
  color: var(--acma-muted);
  text-decoration: none;
  font-weight: 500;
}

.acma-orders-table__view:hover {
  color: var(--acma-ink);
}

/* ---- Per-row action controls (Pantanir / Reikningar tables) -------------- */
/* Coordinated, aligned row actions: one inline text-action (the primary) plus
   an optional kebab <details> overflow menu for the rest. The kebab is a
   fixed-size square pinned right; rows with no overflow reserve its footprint
   with .acma-actions__spacer, so the primary action and the kebab column-align
   across every row regardless of how many actions each has. Supersedes the old
   mix of a plain "Skoða" link and bordered ghost buttons. */

/* Subtle text-action — no border/fill, muted ink, hover tint. Shared by the
   inline primary, each item in the kebab menu, and the ledger's "Sækja reikning". */
.acma-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--acma-font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  color: var(--acma-muted);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-action:hover,
.acma-action:focus-visible {
  color: var(--acma-ink);
  background: var(--acma-paper);
}

/* The host theme colours .woocommerce a links (color:…!important, plus a
   -webkit-text-fill-color that paints the glyph), which would otherwise render
   these <a> text-actions in the theme's link colour instead of the muted/ink
   treatment above. Re-assert it at a specificity that beats `.woocommerce a`;
   !important guards load-order ties and -webkit-text-fill-color wins the glyph.
   Mirrors the nav active-pill override earlier in this file. (Buttons like the
   "Á lista" trigger aren't <a>s, so the theme rule never reaches them.) */
.acma-orders-table__actions .acma-action {
  color: var(--acma-muted) !important;
  -webkit-text-fill-color: var(--acma-muted) !important;
}

.acma-orders-table__actions .acma-action:hover,
.acma-orders-table__actions .acma-action:focus-visible {
  color: var(--acma-ink) !important;
  -webkit-text-fill-color: var(--acma-ink) !important;
}

/* Kebab overflow — a native <details> disclosure, so it opens without any JS
   and is keyboard-operable out of the box. */
.acma-actions-more {
  position: relative;
  display: inline-flex;
}

.acma-actions-more__toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--acma-faint);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-actions-more__toggle::-webkit-details-marker { display: none; }
.acma-actions-more__toggle::marker { content: ""; }

.acma-actions-more__toggle:hover,
.acma-actions-more__toggle:focus-visible,
.acma-actions-more[open] .acma-actions-more__toggle {
  color: var(--acma-ink);
  background: var(--acma-paper);
}

.acma-actions-more__toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

.acma-actions-more__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 176px;
  padding: 6px;
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--acma-ink) 40%, transparent);
}

/* Menu items fill the panel and left-align. */
.acma-actions-more__menu .acma-action {
  justify-content: flex-start;
  width: 100%;
}

/* The "Á lista" trigger ships its own bordered treatment (shopping-list-add.css);
   inside the actions cell flatten it to match the other text-actions (its "+"
   ::before glyph stays). Two-class selector so it wins regardless of load order. */
.acma-orders-table__actions .acma-add-to-list {
  margin: 0;
  padding: 5px 9px;
  font-size: 12.5px;
  border: 0;
  color: var(--acma-muted);
}

.acma-orders-table__actions .acma-add-to-list:hover,
.acma-orders-table__actions .acma-add-to-list:focus-visible {
  color: var(--acma-ink);
  background: var(--acma-paper);
  border-color: transparent;
}

/* Reserve the kebab's footprint on rows with no overflow menu, so the inline
   primary stays column-aligned with the rows that do have one. */
.acma-actions__spacer {
  display: inline-block;
  width: 30px;
  height: 30px;
}

/* ≤900px the .acma-orders-list becomes an overflow-x scroll container (see the
   layout media query below), which would clip an absolutely-positioned popover —
   so drop the menu into the flow, mirroring .acma-invite__panel. */
@media (max-width: 900px) {
  .acma-actions-more {
    flex-direction: column;
    align-items: flex-end;
  }
  .acma-actions-more__menu {
    position: static;
    min-width: 0;
    margin-top: 4px;
    padding: 4px 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

.acma-orders-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--acma-line);
  font-size: 12.5px;
  color: var(--acma-muted);
}

.acma-orders-pager__nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.acma-orders-pager__pos {
  font-variant-numeric: tabular-nums;
}

/* ---- Ledger page (Reikningar) -------------------------------------------- */
/* The secondary "Hreyfingar" (account movements) card, set off below the
   invoices table. */
.acma-ledger__section {
  margin-top: 18px;
}

.acma-ledger__note {
  font-size: 12px;
  color: var(--acma-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acma-ledger__notice {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Cold-cache loader (auto-warms via account.js initLedgerRefresh). */
.acma-ledger__loading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acma-ledger__loading .acma-empty {
  padding: 0;
}

.acma-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--acma-line);
  border-top-color: var(--acma-accent);
  border-radius: 50%;
  animation: acma-spin 0.7s linear infinite;
}

@keyframes acma-spin {
  to { transform: rotate(360deg); }
}

/* "Endurnýja" refresh control + last-updated label in the header. */
.acma-ledger__updated {
  font-size: 12px;
  color: var(--acma-faint);
  font-variant-numeric: tabular-nums;
}

.acma-refresh-icon {
  flex: 0 0 auto;
}

.acma-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.acma-btn.is-loading .acma-refresh-icon {
  animation: acma-spin 0.7s linear infinite;
}

/* ---- Account statement (date-ranged Hreyfingar) -------------------------- */
.acma-stmt__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.acma-stmt__dates {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.acma-stmt__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.acma-stmt__flabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--acma-faint);
}

/* Form-less date inputs (no <form>, per the Breakdance form gotcha); scoped to
   override BD's generic input styling. */
.acma-stmt .acma-stmt__input {
  font-family: var(--acma-font);
  font-size: 13.5px;
  color: var(--acma-ink);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 8px 11px;
  margin: 0;
  background: var(--acma-paper);
  box-sizing: border-box;
}

.acma-stmt .acma-stmt__input:focus {
  outline: none;
  border-color: var(--acma-accent);
}

.acma-stmt__presets .acma-pill {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: var(--acma-font);
}

.acma-ledger-statement.acma-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.acma-stmt__period {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--acma-muted);
  margin-bottom: 12px;
}

.acma-stmt__updated {
  color: var(--acma-faint);
  font-variant-numeric: tabular-nums;
}

.acma-stmt__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--acma-paper);
  border-radius: var(--acma-radius-card);
}

.acma-stmt__sumcell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.acma-stmt__sumlabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--acma-muted);
}

.acma-stmt__sumval {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--acma-ink);
}

.acma-stmt-table .acma-stmt__carry td {
  color: var(--acma-muted);
  font-weight: 500;
  border-top: none;
}

.acma-stmt-table tfoot .acma-stmt__totals td {
  font-weight: 600;
  color: var(--acma-ink);
  border-top: 2px solid var(--acma-line);
}

/* ---- Notendur (sub-users / team) ----------------------------------------- */
/* Reuses the dashboard/Pantanir primitives (.acma-card, .acma-kpis, .acma-pills,
   .acma-orders-table, .acma-status); the rules below are the member-row, role
   chip, activity, invite popover and form specifics. Forms are scoped tightly
   (.acma-subusers .acma-form …) so Breakdance's `.woocommerce form …` field
   styling can't reach them (the BD-form gotcha). */

/* Invite popover — a native <details> whose <summary> is the action button. */
.acma-invite {
  position: relative;
}

.acma-invite__toggle {
  list-style: none;
  cursor: pointer;
}

.acma-invite__toggle::-webkit-details-marker {
  display: none;
}

.acma-invite__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(440px, 92vw);
  padding: 18px;
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--acma-ink) 40%, transparent);
}

.acma-invite__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}

/* On narrow screens drop the popover into the flow so it never overflows. */
@media (max-width: 640px) {
  .acma-invite,
  .acma-dash__actions {
    width: 100%;
  }
  .acma-invite__panel {
    position: static;
    width: 100%;
    margin-top: 10px;
  }
}

/* ---- Bespoke forms (create / edit) -------------------------------------- */
.acma-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.acma-form-card {
  padding: 20px;
  max-width: 620px;
}

:is(.acma-subusers, .acma-addresses, .acma-login) .acma-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

:is(.acma-subusers, .acma-addresses, .acma-login) .acma-field > label,
:is(.acma-subusers, .acma-addresses, .acma-login) .acma-field-label {
  display: block;
  text-align: left;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--acma-muted);
}

.acma-req {
  color: var(--acma-accent);
}

:is(.acma-subusers, .acma-addresses, .acma-login) .acma-field--split {
  flex-direction: row;
  gap: 12px;
}

:is(.acma-subusers, .acma-addresses, .acma-login) .acma-field--split > span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Scoped input reset — beats Breakdance's generic `.woocommerce form` input rules. */
:is(.acma-subusers, .acma-addresses, .acma-login) .acma-input {
  font-family: var(--acma-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--acma-ink);
  background: var(--acma-paper);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 9px 12px;
  margin: 0;
  width: 100%;
  max-width: none;
  display: block;
  box-sizing: border-box;
}

:is(.acma-subusers, .acma-addresses, .acma-login) textarea.acma-input {
  resize: vertical;
  min-height: 52px;
}

:is(.acma-subusers, .acma-addresses, .acma-login) .acma-input:focus {
  outline: none;
  border-color: var(--acma-accent);
}

:is(.acma-subusers, .acma-addresses, .acma-login) .acma-input:disabled {
  color: var(--acma-muted);
  background: var(--acma-hover);
  cursor: not-allowed;
}

.acma-help {
  font-size: 11.5px;
  color: var(--acma-faint);
  line-height: 1.4;
}

.acma-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Delivery-location + permission checkbox lists. */
.acma-subusers .acma-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 190px;
  overflow-y: auto;
}

.acma-subusers .acma-check,
.acma-subusers .acma-perm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  color: var(--acma-ink);
  cursor: pointer;
}

.acma-subusers .acma-check input,
.acma-subusers .acma-perm input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  accent-color: var(--acma-ink);
}

/* ---- Role presets -------------------------------------------------------- */
.acma-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 4px;
}

.acma-subusers .acma-preset {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: var(--acma-font);
}

.acma-perm-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--acma-paper);
  border-radius: var(--acma-radius-btn);
}

/* ---- Member table -------------------------------------------------------- */
.acma-team-table td {
  vertical-align: middle;
}

.acma-member {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acma-member__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--acma-paper);
  color: var(--acma-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.acma-member__avatar--pending {
  background: color-mix(in srgb, var(--acma-accent) 14%, var(--acma-card-bg));
  color: var(--acma-accent-ink);
}

.acma-member__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acma-member__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-member__email {
  font-size: 11.5px;
  color: var(--acma-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acma-member__you {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acma-card-bg);
  background: var(--acma-ink);
  border-radius: 9px;
  padding: 1px 7px;
}

.acma-member__self {
  font-size: 11.5px;
  color: var(--acma-faint);
}

/* ---- Role chips ---------------------------------------------------------- */
.acma-role {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--acma-ink) 9%, var(--acma-card-bg));
  color: var(--acma-ink);
}

.acma-role--full {
  background: var(--acma-ink);
  color: var(--acma-card-bg);
}

.acma-role--viewer {
  background: var(--acma-accent-tint);
  color: var(--acma-accent-ink);
}

.acma-role--custom {
  background: transparent;
  color: var(--acma-muted);
  box-shadow: inset 0 0 0 1px var(--acma-line);
}

/* ---- Permission chips ---------------------------------------------------- */
.acma-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 320px;
}

.acma-chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--acma-muted);
  background: var(--acma-paper);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

.acma-chip--none {
  font-style: italic;
  color: var(--acma-faint);
  background: transparent;
}

/* ---- Activity + usage ---------------------------------------------------- */
.acma-activity {
  font-size: 12.5px;
  color: var(--acma-muted);
  white-space: nowrap;
}

.acma-activity.is-pending {
  color: var(--acma-accent-ink);
  font-weight: 500;
}

.acma-usage {
  font-size: 12.5px;
  color: var(--acma-ink);
  font-variant-numeric: tabular-nums;
}

.acma-usage.is-empty {
  color: var(--acma-faint);
}

/* ---- Pending invites ----------------------------------------------------- */
.acma-pending {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
}

.acma-pending__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 12px;
  border-top: 1px solid var(--acma-line);
}

.acma-pending__row:first-child {
  border-top: none;
}

.acma-pending__row .acma-member {
  flex: 1 1 240px;
  min-width: 0;
}

.acma-pending__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.acma-pending__role {
  font-size: 12px;
  color: var(--acma-muted);
}

.acma-pending__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.acma-inline-form {
  margin: 0;
}

/* Plain text-button (cancel / delete) — no Breakdance button chrome.
   Shared by the sub-users screens and the addresses page. */
.acma-subusers .acma-linkbtn,
.acma-addresses .acma-linkbtn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--acma-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acma-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acma-subusers .acma-linkbtn:hover,
.acma-addresses .acma-linkbtn:hover {
  color: var(--acma-ink);
}

.acma-subusers .acma-linkbtn--danger,
.acma-addresses .acma-linkbtn--danger {
  color: #8a1d17;
}

.acma-subusers .acma-linkbtn--danger:hover,
.acma-addresses .acma-linkbtn--danger:hover {
  color: #6e160f;
}

/* ---- Edit page header ---------------------------------------------------- */
.acma-backlink {
  margin: 0 0 12px;
  font-size: 12.5px;
}

.acma-backlink a {
  color: var(--acma-muted);
  text-decoration: none;
}

.acma-backlink a:hover {
  color: var(--acma-ink);
}

.acma-edit__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.acma-subuser-delete {
  margin: 16px 0 0;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .acma-account {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .acma-account__sidebar,
  .acma-account__main {
    grid-column: 1 / -1;
  }
  .acma-recent-orders,
  .acma-orders-list {
    overflow-x: auto;
  }
  .acma-pending__actions {
    margin-left: 0;
  }
  .acma-subusers .acma-field--split {
    flex-direction: column;
  }
}

/* ---- Heimilisföng (addresses) -------------------------------------------- */
.acma-addresses {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Header: eyebrow + big display title + (B2C) primary CTA on one row. */
.acma-addr__head {
  align-items: center;
}

.acma-addresses .acma-dash__eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--acma-accent-ink); /* readable on a light-accent theme (gold) */
}

.acma-addresses .acma-dash__title {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* A small uppercase label sitting ABOVE each card. */
.acma-addr-section__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acma-muted);
}

.acma-addr-section__label svg {
  width: 15px;
  height: 15px;
}

/* Locations: ONE card; rows are flush, divided by a faint line. */
.acma-addr-list {
  overflow: hidden; /* clip the row dividers to the card radius */
}

.acma-addr-list > .acma-empty {
  margin: 0;
  padding: 20px;
}

.acma-addr {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--acma-ink) 7%, transparent);
}

.acma-addr:last-child {
  border-bottom: 0;
}

.acma-addr__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--acma-card-bg);
  background: var(--acma-ink); /* ink fill (not the light gold accent) for contrast */
}

.acma-addr__body {
  min-width: 0;
  flex: 1 1 auto;
}

.acma-addr__name {
  margin: 0 0 3px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acma-addr__lines {
  margin: 0;
  color: var(--acma-muted);
}

.acma-addr__contact {
  margin: 4px 0 0;
  color: var(--acma-faint);
  font-size: 0.9em;
}

.acma-addr__tag {
  font-size: 0.78em;
}

/* Billing card. */
.acma-addr-billing {
  padding: 24px;
}

.acma-addr-billing .acma-addr__name {
  font-size: 16px;
  letter-spacing: normal;
}

.acma-addr__same {
  font-weight: 400;
  color: var(--acma-faint);
}

.acma-addr__metaline {
  margin: 8px 0 0;
  color: var(--acma-muted);
  font-size: 12px;
}

.acma-addr__billing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* "Nota sérstakt reikningsheimilisfang" — an outline toggle button. */
.acma-addr__sep-billing {
  margin-right: auto;
  padding: 8px 12px;
  border: 1px solid var(--acma-line);
  border-radius: 8px;
  background: var(--acma-paper);
  font-family: var(--acma-font);
  font-size: 12.5px;
  color: var(--acma-ink);
  cursor: pointer;
}

.acma-addr__sep-billing.is-active {
  border-color: var(--acma-accent);
  color: var(--acma-accent-ink);
  background: var(--acma-accent-tint);
}

/* "Outside delivery routes" notice — a subtle inline banner, not a card. */
.acma-addr-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--acma-radius-card);
  background: color-mix(in srgb, var(--acma-accent) 8%, var(--acma-card-bg));
}

.acma-addr-notice__icon {
  flex-shrink: 0;
  color: var(--acma-accent-ink);
  line-height: 0;
}

.acma-addr-notice__body {
  flex: 1 1 auto;
}

.acma-addr-notice__title {
  margin: 0 0 2px;
  font-weight: 600;
}

.acma-addr-notice__text {
  margin: 0;
  color: var(--acma-muted);
  font-size: 0.92em;
}

.acma-addr-notice__link {
  flex-shrink: 0;
  align-self: center;
  font-weight: 600;
  color: var(--acma-accent-ink);
  white-space: nowrap;
}

/* ---- Shopping lists (Innkaupalistar) ------------------------------------- */
.acma-shopping-lists {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acma-lists__head {
  margin-bottom: 2px;
}

.acma-lists__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acma-ink);
}

.acma-lists__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--acma-muted);
  max-width: 60ch;
}

/* Save-cart-as-list card. Breakdance ships
   `.breakdance-woocommerce .woocommerce-MyAccount-content form { flex-direction: column }`
   at specificity (0,2,1); this <form> must out-specify it, hence the
   .woocommerce-MyAccount-content ancestor (0,3,0). Same trap the Pantanir search
   input documents above — but that one dodged it by not being a <form>. */
.woocommerce-MyAccount-content .acma-shopping-lists .acma-lists__savecart {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 16px 18px;
  margin: 0;
  min-height: 0;
  height: auto;
}

.acma-lists__savecart-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.acma-lists__savecart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-lists__savecart-sub {
  font-size: 12px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

.acma-lists__savecart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
  justify-content: flex-end;
}

/* Scoped input reset — beats Breakdance's generic `.woocommerce form` input rules. */
.acma-shopping-lists .acma-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  font-family: var(--acma-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--acma-ink);
  background: var(--acma-paper);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 9px 12px;
  margin: 0;
  box-sizing: border-box;
}

.acma-shopping-lists .acma-input:focus {
  outline: none;
  border-color: var(--acma-accent);
}

.acma-lists__empty {
  padding: 22px 20px;
  text-align: center;
}

.acma-lists__empty .acma-empty {
  padding: 0;
}

/* List cards. */
.acma-lists {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acma-list-card {
  overflow: hidden;
}

.acma-list-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 15px 18px;
}

.acma-list-card__id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.acma-list-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--acma-ink);
  overflow-wrap: anywhere;
}

.acma-list-card__count {
  font-size: 12px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

.acma-list-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acma-shopping-lists .acma-list-card__form {
  margin: 0;
  display: inline-flex;
  min-height: 0;
}

.acma-list-card__toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--acma-ink) 30%, transparent);
}

.acma-list-card__delete {
  color: var(--acma-muted);
}

.acma-list-card__delete:hover {
  color: #8a1d17;
  border-color: color-mix(in srgb, #b3261e 40%, transparent);
}

.acma-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Expanded item panel. */
.acma-list-card__items {
  border-top: 1px solid var(--acma-line);
  padding: 6px 18px 14px;
  background: var(--acma-paper);
}

.acma-list-card__items.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.acma-li-rows {
  display: flex;
  flex-direction: column;
}

.acma-li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--acma-line);
}

.acma-li:last-child {
  border-bottom: 0;
}

.acma-li__thumb {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
}

.acma-li__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.acma-li__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acma-li__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--acma-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.acma-li__name:hover {
  color: var(--acma-accent-ink);
}

.acma-li__unit {
  font-size: 12px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

/* Quantity stepper. */
.acma-li__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  background: var(--acma-card-bg);
  overflow: hidden;
}

.acma-li__step {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--acma-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.acma-li__step:hover {
  background: var(--acma-hover);
}

.acma-li__qtyinput {
  width: 42px;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--acma-line);
  border-right: 1px solid var(--acma-line);
  text-align: center;
  font-family: var(--acma-font);
  font-size: 13.5px;
  color: var(--acma-ink);
  background: transparent;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.acma-li__qtyinput::-webkit-outer-spin-button,
.acma-li__qtyinput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.acma-li__qtyinput:focus {
  outline: none;
}

.acma-li__line {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acma-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acma-li__remove {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--acma-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-li__remove:hover {
  background: color-mix(in srgb, #b3261e 12%, transparent);
  color: #8a1d17;
}

.acma-li-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--acma-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-li-total__val {
  font-variant-numeric: tabular-nums;
}

.acma-li-empty,
.acma-li-status {
  margin: 0;
  padding: 14px 0 8px;
  color: var(--acma-muted);
  font-size: 13px;
}

.acma-li-status.is-error {
  color: #8a1d17;
}

/* Stack the item row on narrow viewports (the quantity controls drop below). */
@media (max-width: 560px) {
  .acma-li {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb info remove"
      "thumb qty  line";
    gap: 6px 12px;
  }
  .acma-li__thumb { grid-area: thumb; width: 44px; height: 44px; }
  .acma-li__info  { grid-area: info; }
  .acma-li__qty   { grid-area: qty; }
  .acma-li__line  { grid-area: line; align-self: center; }
  .acma-li__remove { grid-area: remove; justify-self: end; }

  .acma-list-card__actions {
    width: 100%;
  }
}

/* ---- One-form sign-in (logged-out My Account) ---------------------------- */
/*
 * The email-first card that replaces WooCommerce's two-column login/register
 * screen. Reuses the .acma-card shell and the bespoke-form primitives
 * (.acma-field / .acma-input / .acma-form__actions) added to the :is() lists
 * above, so the only rules here are the ones specific to this surface: the
 * centred column, the readonly identity row, and the secondary link route.
 *
 * Rendered by templates/woocommerce/myaccount/form-login.php; no-ops on a theme
 * that ships its own form-login.php (different markup, no .acma-login).
 */
.acma-login {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 8px 0 32px;
}

.acma-login__card {
  width: 100%;
  /* Avista Core's wp-login.php card is 400px at `--space-6`. Matching it keeps
     the two sign-in screens reading as one object at two addresses. */
  max-width: 400px;
  padding: 24px;
}

/* WooCommerce wraps account content in a display:flex `.woocommerce` div, so the
   card would otherwise size to its content and sit hard left. */
.woocommerce:has(> .acma-login) {
  width: 100%;
}

/* ---- Type scale, borrowed from Avista Core's wp-login.php takeover --------
 *
 * SIZES from Core's login.css; COLOURS stay on the --acma-* tokens. Owner,
 * 2026-09-15 — the two screens should feel like one object while each site's
 * palette still drives it.
 *
 * `.acma-login` is repeated in these selectors ON PURPOSE. Breakdance ships
 * `.bde-h2, .breakdance h2 { font-size: 48px }` in global-settings.css at
 * (0,1,1), which outranks a bare `.acma-login__title` at (0,1,0) — measured on
 * idnu, where this heading rendered at 48px inside a 400px card while this file
 * plainly said 21px. Doubling up takes it to (0,2,0). Do not "simplify" these. */
.acma-login .acma-login__title {
  margin: 0 0 4px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acma-ink);
}

.acma-login .acma-login__lede {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--acma-muted);
}

/* Core's fields are 44px at 15px and its primary control 48px at 15px. Scoped to
   the logged-out card only — the account area keeps its own denser scale. */
.acma-login .acma-login__card .acma-input {
  height: 44px;
  font-size: 15px;
}

.acma-login .acma-login__card .acma-btn {
  height: 48px;
  font-size: 15px;
  font-weight: 500;
}

/* The step-1 → step-2 swap. Only the visible panel occupies space; `hidden` is set
   server-side on first render and toggled by login-flow.js after that. */
.acma-login__panel[hidden] {
  display: none;
}

.acma-login__form {
  margin: 0;
}

/* ---- The address, once given -------------------------------------------- */
/* A readonly input (see the template for why it is a field and not static text)
   dressed down so it reads as a confirmation rather than something to fill in. */
.acma-login__identity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acma-login .acma-input--static {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
  color: var(--acma-ink);
  cursor: default;
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
}

.acma-login .acma-input--static:focus {
  outline: none;
  border-color: transparent;
}

.acma-login__back {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--acma-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acma-accent) 35%, transparent);
}

.acma-login__back:hover {
  color: var(--acma-accent);
  border-bottom-color: var(--acma-accent);
}

/* ---- Actions ------------------------------------------------------------- */
.acma-login .acma-btn--solid {
  justify-content: center;
  width: 100%;
}

.acma-login__remember {
  margin: 2px 0 0;
}

.acma-login__remember .acma-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  color: var(--acma-muted);
}

.acma-login .acma-form__actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 16px;
}

/* `align-self` matters here: .acma-form__actions is a stretch column, so without it
   the anchor becomes a full-width flex item and its underline runs the whole width
   of the card instead of sitting under the words. Only visible where the host theme
   does not restyle the link — i.e. exactly the bare-theme fallback case, which is
   why it went unnoticed on a Breakdance host. */
.acma-login .acma-card__link {
  align-self: center;
  text-align: center;
  font-size: 12.5px;
}

/* WooCommerce's privacy notice, injected by `woocommerce_register_form`.
 *
 * Nothing here styled it, so it inherited the THEME's body size and rendered as
 * the largest text on the card — several times the lede above it — on a card
 * whose own copy is 14px. It is boilerplate a shopper skims, not the loudest
 * thing on the screen, so it takes the help scale and the muted ink. The link
 * keeps the accent so it still reads as one. */
.acma-login .woocommerce-privacy-policy-text,
.acma-login .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--acma-muted);
}

.acma-login .woocommerce-privacy-policy-text a {
  color: var(--acma-accent);
}

.acma-login__error:empty {
  display: none;
}

.acma-login__error {
  color: #b3261e;
}

/* Sign-in-link confirmation. Deliberately calm — it is a receipt, not an alert,
   and it says the same thing whether or not the address had an account. */
.acma-login__sent {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--acma-radius-btn);
  background: var(--acma-paper);
  border: 1px solid var(--acma-line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--acma-ink);
}

/* The quiet cross-links between the two steps (straight to signup / back to
   sign-in). Deliberately understated: the point of the flow is that the visitor
   normally does not have to choose. */
.acma-login__aside {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--acma-muted);
}

.acma-login__aside a {
  color: var(--acma-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acma-accent) 35%, transparent);
}

.acma-login__aside a:hover {
  border-bottom-color: var(--acma-accent);
}

/* Secondary route (one-time sign-in link) — its own form, below a divider so it
   reads as an alternative to the password rather than part of it. */
.acma-login__alt {
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  /* 12px, matching .acma-form__actions above it, so the routes under the rule
     breathe on the card's own rhythm rather than bunching tighter than the
     controls they are an alternative to. */
  gap: 12px;
}

/* A labelled rule rather than the bare border-top this used to be. With more
   than one route under it, an unlabelled line reads as the end of the form
   instead of the start of the alternatives. Colours and radii come from the
   --acma-* set, which resolves to the THEME's --bde-* globals — this block must
   look like the shop, not like Avista Core's login screen. */
.acma-login__or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85em;
  color: var(--acma-faint);
}

.acma-login__or::before,
.acma-login__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acma-line);
}

.acma-login__alt-route { margin: 0; }

/* "Administrator? Use the password form" — the password rows when the acma
   Password cell is off, behind a native <details> so it opens with JavaScript
   off. Offered to every visitor on purpose (see form-login.php), and quiet for
   the same reason: it is for the people who run the shop, not the call to
   action. Open, the body keeps .acma-form's 13px rhythm, which the rows lose by
   no longer being the form's own flex children. */
.acma-login .acma-login__admin-toggle {
  display: block;
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--acma-muted);
}

.acma-login .acma-login__admin-toggle::-webkit-details-marker {
  display: none;
}

.acma-login .acma-login__admin-toggle:hover {
  color: var(--acma-accent);
}

.acma-login__admin-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 13px;
}

.acma-login__alt .acma-btn {
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
}

.acma-login .acma-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- Host reset ---------------------------------------------------------- */
/*
 * The two follow-up forms keep WooCommerce's own class names, because plugins and
 * themes hook onto them — but that also invites the host's styling for the STOCK
 * login screen. Breakdance, for one, gives `.woocommerce-form-login` /
 * `-register` a white card of their own (background + border + shadow + 360px
 * max-width + padding) and repaints `button[type=submit]`, which inside our card
 * reads as a second frame drawn around the fields and two differently-coloured
 * buttons in the same flow.
 *
 * Everything below therefore undoes host chrome rather than adding any: the card
 * is `.acma-login__card`, and these forms are plain content inside it. Written at
 * 0,3,0 specificity (three classes) so it beats the host's 0,2,1 rules whatever
 * order the stylesheets happen to load in — the same tactic as the
 * `.woocommerce-MyAccount-navigation` reset near the top of this file.
 */
.acma-login .acma-login__card .woocommerce-form-login,
.acma-login .acma-login__card .woocommerce-form-register {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
}

/* This pair used to be ink at rest and accent on hover — mono until you touched
 * it. Inverted 2026-09-15: the accent leads and the hover darkens it, so the
 * card's primary action matches the brand at rest instead of only under a
 * cursor (which a touch device never delivers at all).
 *
 * The triple selector is load-bearing, not accidental: this is the 0,3,0 scoped
 * reset that undoes the host's styling of `.woocommerce-form-login` inside our
 * card. Anything less specific loses to Breakdance. */
.acma-login .acma-login__card .acma-btn--solid {
  background: var(--acma-btn-solid-bg, var(--acma-accent));
  border-color: var(--acma-btn-solid-bg, var(--acma-accent));
  color: var(--acma-on-accent, var(--acma-card-bg));
}

.acma-login .acma-login__card .acma-btn--solid:hover {
  background: color-mix(in srgb, var(--acma-btn-solid-bg, var(--acma-accent)) 85%, #000);
  border-color: color-mix(in srgb, var(--acma-btn-solid-bg, var(--acma-accent)) 85%, #000);
  color: var(--acma-on-accent, var(--acma-card-bg));
}

.acma-login .acma-login__card .acma-btn--ghost {
  background: none;
  color: var(--acma-ink);
  border-color: var(--acma-accent);
}

.acma-login .acma-login__card .acma-btn--ghost:hover {
  background: var(--acma-accent);
  color: var(--acma-card-bg);
  border-color: var(--acma-accent);
}

/* Link colours: the host's global `a` rule outranks a single-class selector. */
.acma-login .acma-login__card .acma-login__back,
.acma-login .acma-login__card .acma-login__aside a {
  color: var(--acma-accent);
}

/* "Forgot your password?" is a fallback, not a call to action: the shared
   .acma-card__link primitive gives it an accent underline, which next to muted
   text reads as a mis-styled link. Quiet both, and let hover do the accenting. */
.acma-login .acma-login__card .acma-card__link {
  color: var(--acma-muted);
  text-decoration: none;
  border-bottom-color: color-mix(in srgb, var(--acma-muted) 40%, transparent);
}

.acma-login .acma-login__card .acma-card__link:hover {
  color: var(--acma-accent);
  border-bottom-color: var(--acma-accent);
}

@media (max-width: 480px) {
  .acma-login__card {
    padding: 22px 18px;
  }
}