/* ============================================================================
   common-core — account page (logged out: login / register / password reset)

   STRUCTURAL ONLY. Every colour, font and radius comes from the brand's Crayon
   Box variables in the brand plugin's design-system.css. Nothing here may
   hardcode a brand value — ground rules 3, 4 and 6.

   TWO THINGS TO KNOW BEFORE EDITING
   ---------------------------------
   1. Mavron is a DARK brand. --cc-text is #ffffff and --cc-bg-subtle is
      #111111 there, inverted from Eden and Forgebury. So no rule below may
      assume "surface" means white or "text" means dark. Where a rule needs a
      shade *between* the surface and the text — an input fill, a hover, a
      divider — it is mixed from --cc-text rather than picked, which makes it
      self-inverting: a 4% tint of near-black on Eden, a 4% tint of white on
      Mavron. That is what the color-mix() calls are doing, and each is
      preceded by a flat fallback for browsers without it.

   2. Nothing here may hide a form unless JavaScript is present. The tab CSS is
      gated behind .is-tabbed, which only an inline script adds. With JS off,
      the tab bar is hidden and both forms stack — unstyled-ish, but reachable.
      Never move a hiding rule outside that gate.

   Fallbacks on the var() calls are neutral, not any brand's palette. They
   exist so the page is still usable if a brand has not yet added the newer
   Crayon Box keys, not as a default look.
   ============================================================================ */

.cc-account {
  --cc-account-max: 440px;

  box-sizing: border-box;
  width: 100%;
  max-width: var(--cc-account-max);
  margin: 0 auto;
  padding: 8px 0 48px;
  font-family: var(--cc-font-body, sans-serif);
  color: var(--cc-text, #1a1a1a);
}

.cc-account *,
.cc-account *::before,
.cc-account *::after { box-sizing: border-box; }

/* The card. No overflow:hidden anywhere on it — Eden Canvas runs a
   third-party social-login plugin that injects its own markup (and, in the
   Google case, a same-origin iframe) into this form. Clipping is how that
   silently half-renders. */
.cc-account__card {
  padding: 32px 28px 30px;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: var(--cc-radius-card, 16px);
  background: var(--cc-surface, #ffffff);
  box-shadow: var(--cc-shadow-card, 0 18px 40px -22px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.05));
}

/* ── Head ─────────────────────────────────────────────────────────────── */

.cc-account__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  text-align: center;
}

.cc-account__icon {
  flex: none;
  color: var(--cc-accent, #767676);
}

.cc-account__tagline {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cc-text-muted, #6e6e73);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────
   Hidden until the inline script arms them. Without that class the buttons
   would be visible but inert, which is worse than absent. */

.cc-account__tabs { display: none; }

.cc-account.is-tabbed .cc-account__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  border-radius: 999px;
  /* Fallback first, then the self-inverting mix. */
  background: rgba(127, 127, 127, 0.1);
  background: color-mix(in srgb, var(--cc-text, #1a1a1a) 7%, transparent);
}

.cc-account__tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 11px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cc-text-muted, #6e6e73);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
}

.cc-account__tab:hover {
  color: var(--cc-text, #1a1a1a);
}

/* Selected state carries a surface change AND a weight/colour change — colour
   is never the only indicator of which tab is active. */
.cc-account__tab[aria-selected="true"] {
  background: var(--cc-surface, #ffffff);
  font-weight: 600;
  color: var(--cc-text, #1a1a1a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.cc-account__tab:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: 2px;
}

/* ── Panels ───────────────────────────────────────────────────────────────
   WooCommerce lays the two columns out side by side at ~48% each. Inside a
   440px card that is unusable, so they are unstacked here for BOTH states:
   tabbed (one visible, full width) and no-JS (both visible, stacked).

   The selectors are deliberately long rather than !important — WooCommerce's
   own `.woocommerce .col2-set .col-1` is three classes, so three classes plus
   an element beats it on specificity with nothing left to escalate later. */

.cc-account .cc-account__body #customer_login { display: block; margin: 0; }

.cc-account .cc-account__body #customer_login > div {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Second form gets a rule off it when both are showing (no-JS fallback). */
.cc-account:not(.is-tabbed) .cc-account__body #customer_login > div + div {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--cc-border-subtle, #e0e0e0);
}

/* The only hiding rule in this file, and it is inside the .is-tabbed gate.
   aria-hidden is set by the JS that also drives the tab state, so the visual
   and accessibility trees can never disagree. */
.cc-account.is-tabbed .cc-account__panel[aria-hidden="true"] { display: none; }

.cc-account.is-tabbed .cc-account__panel:focus { outline: none; }

/* When tabs are showing they name the panels; WooCommerce's own <h2> would be
   a second label saying the same word directly beneath. */
.cc-account.is-tabbed .cc-account__panel > h2 { display: none; }

/* Centred, because on the untabbed screens this is the only heading and it
   sits directly under the centred mark. Left-aligning it against a centred
   icon read as an accident on Mavron — which is the one brand that shows it,
   since registration is off there and so no tab bar replaces it. */
.cc-account .cc-account__body > h2,
.cc-account .cc-account__panel > h2 {
  margin: 0 0 20px;
  font-family: var(--cc-font-heading, sans-serif);
  font-size: 22px;
  line-height: 1.25;
  text-align: center;
  color: var(--cc-text, #1a1a1a);
}

/* With no tab bar the mark and the heading are one unit, so the gap the head
   reserves for a tab bar underneath it is dead space. */
.cc-account:not(.is-tabbed) .cc-account__head { margin-bottom: 12px; }

/* ── Notices ──────────────────────────────────────────────────────────────
   Captured into the card by the PHP buffer, so they land here rather than
   above the card where they read as belonging to the page, not the form. */

.cc-account .woocommerce-notices-wrapper:empty { display: none; }

.cc-account .woocommerce-error,
.cc-account .woocommerce-message,
.cc-account .woocommerce-info {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-left-width: 3px;
  border-radius: var(--cc-radius-input, 10px);
  background: rgba(127, 127, 127, 0.06);
  background: color-mix(in srgb, var(--cc-text, #1a1a1a) 4%, transparent);
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-text, #1a1a1a);
}

.cc-account .woocommerce-error { border-left-color: var(--cc-danger, #b3261e); }
.cc-account .woocommerce-message,
.cc-account .woocommerce-info { border-left-color: var(--cc-accent, #767676); }

.cc-account .woocommerce-error li,
.cc-account .woocommerce-message li,
.cc-account .woocommerce-info li { margin: 0; padding: 0; list-style: none; }

.cc-account .woocommerce-error::before,
.cc-account .woocommerce-message::before,
.cc-account .woocommerce-info::before { display: none; }

/* ── Form rows ────────────────────────────────────────────────────────── */

/* Strip WooCommerce's own form chrome. woocommerce.css ships:
       .woocommerce form.login, .woocommerce form.register
       { border:1px solid #cfc8d8; padding:20px; margin:2em 0; border-radius:5px }
   which draws a second bordered box *inside* the card — a card within a card —
   and adds 2em of dead space above and below it.

   The bare `form` selector below is not enough on its own. It scores 0,2,1 and
   so does `.woocommerce form.login`, so the winner is decided by which
   stylesheet loads last. On Eden and Forgebury the brand CSS happened to
   suppress it; on Mavron — the lightest build, with the least theme CSS in
   front of WooCommerce's defaults — it did not, and the double box was
   visible. Naming the classes takes it to 0,3,1, which settles it everywhere
   rather than by load order. (Reported on Mavron 2026-08-05.) */
.cc-account .cc-account__card form,
.cc-account .cc-account__card form.login,
.cc-account .cc-account__card form.register,
.cc-account .cc-account__card form.woocommerce-form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cc-account .form-row,
.cc-account .woocommerce-form-row {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
}

.cc-account .form-row label,
.cc-account .woocommerce-form-row label {
  display: block;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cc-text, #1a1a1a);
}

.cc-account .required {
  color: var(--cc-danger, #b3261e);
  text-decoration: none;
  border: none;
}

/* 16px is a hard floor, not a preference: iOS Safari zooms the viewport on
   focus for anything smaller, which on a login form throws the visitor into a
   zoomed, horizontally-scrolled page mid-password. */
.cc-account .cc-account__card input[type="text"],
.cc-account .cc-account__card input[type="email"],
.cc-account .cc-account__card input[type="password"],
.cc-account .cc-account__card input[type="tel"] {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cc-border-subtle, #e0e0e0);
  border-radius: var(--cc-radius-input, 10px);
  background: transparent;
  background: color-mix(in srgb, var(--cc-text, #1a1a1a) 3%, transparent);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--cc-text, #1a1a1a);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-account .cc-account__card input::placeholder {
  color: var(--cc-text-muted, #6e6e73);
  opacity: 1;
}

.cc-account .cc-account__card input[type="text"]:focus,
.cc-account .cc-account__card input[type="email"]:focus,
.cc-account .cc-account__card input[type="password"]:focus,
.cc-account .cc-account__card input[type="tel"]:focus {
  outline: none;
  border-color: var(--cc-accent, #767676);
  box-shadow: 0 0 0 3px var(--cc-focus-ring, var(--cc-accent, #767676));
  /* The ring is the accent at low alpha; keeping it as a shadow rather than an
     outline means it follows the input's border-radius. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-focus-ring, var(--cc-accent, #767676)) 30%, transparent);
}

/* ── Password reveal ──────────────────────────────────────────────────────
   WooCommerce absolutely-positions this toggle against a default-height
   input. Restyling the input without re-anchoring it leaves the eye floating
   over the middle of the field or below it entirely. */

.cc-account .cc-account__card .password-input {
  position: relative;
  display: block;
  width: 100%;
}

.cc-account .cc-account__card .password-input input { padding-right: 48px; }

.cc-account .cc-account__card .show-password-input {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--cc-text-muted, #6e6e73);
}

/* ── Checkbox rows ────────────────────────────────────────────────────────
   "Remember me" is a <label> wrapping its own <input>, so the block-label
   rule above would stack the tick above the words. */

.cc-account .cc-account__card label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--cc-text-muted, #6e6e73);
  cursor: pointer;
}

.cc-account .cc-account__card label.woocommerce-form__label-for-checkbox input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--cc-accent, #767676);
  cursor: pointer;
}

.cc-account .cc-account__card .woocommerce-form-login__rememberme { margin: 0 0 18px; }

/* ── Submit ───────────────────────────────────────────────────────────── */

.cc-account .cc-account__card button.button,
.cc-account .cc-account__card button[type="submit"],
.cc-account .cc-account__card input[type="submit"] {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0 0 14px;
  padding: 13px 20px;
  border: none;
  border-radius: var(--cc-radius-input, 10px);
  background: var(--cc-accent, #444444);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  /* --cc-on-accent, not --cc-text and not --cc-surface. All three brands use
     a gold accent, and white on gold measures ~2.2:1 — a straight WCAG AA
     failure at this size, and the mistake the stock buttons currently make.
     Only the brand knows what is legible on its own accent, so it supplies
     the answer. Fallback is ink for the same reason. */
  color: var(--cc-on-accent, #1a1a1a);
  text-align: center;
  cursor: pointer;
  /* Colour and shadow only. A scale transform here shifts the fields below it
     on every hover. */
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.cc-account .cc-account__card button.button:hover,
.cc-account .cc-account__card button[type="submit"]:hover,
.cc-account .cc-account__card input[type="submit"]:hover {
  background: var(--cc-accent-hover, #2b2b2b);
}

.cc-account .cc-account__card button.button:focus-visible,
.cc-account .cc-account__card button[type="submit"]:focus-visible,
.cc-account .cc-account__card input[type="submit"]:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: 3px;
}

/* ── Secondary links and small print ──────────────────────────────────── */

.cc-account .woocommerce-LostPassword {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.cc-account .woocommerce-LostPassword a,
.cc-account .cc-account__card a {
  color: var(--cc-accent, #767676);
  text-decoration: none;
}

.cc-account .woocommerce-LostPassword a:hover,
.cc-account .cc-account__card a:hover { text-decoration: underline; }

.cc-account .cc-account__card a:focus-visible {
  outline: 2px solid var(--cc-focus-ring, var(--cc-accent, #767676));
  outline-offset: 2px;
  border-radius: 3px;
}

.cc-account .woocommerce-privacy-policy-text,
.cc-account .cc-account__card p:not([class]) {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cc-text-muted, #6e6e73);
}

/* ── Third-party social login ─────────────────────────────────────────────
   Never clip anything a third party injects into this form. Eden Canvas
   renders a Google button in here, and an iframe or an oversized image that
   overflows a card with overflow:hidden silently half-renders.

   Not brand-specific despite currently only mattering on Eden: any of the
   three sites could install Site Kit, so this belongs in shared CSS. */

.cc-account .cc-account__card iframe,
.cc-account .cc-account__card img { max-width: 100%; }

/* Google Site Kit's "Sign in with Google" (Site Kit's own feature, not a
   separate social-login plugin — confirmed on live Eden Canvas 2026-08-05).
   It hooks woocommerce_login_form_start, so it renders as the FIRST form row
   inside the login panel: the output buffer already captures it, and the tab
   logic already hides and shows it with the rest of that panel. Nothing extra
   is needed to make it work — this only stops it sitting adrift at the left
   edge, since Site Kit ships its own max-width:320px and the card is wider.

   Note it appears on the sign-in panel only, because that is where Site Kit
   puts it. Registering with Google is not offered, which matches what the
   site does today. */

.cc-account .googlesitekit-sign-in-with-google__frontend-output-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
  /* Site Kit ships `max-width:320px` on this container. Centring the button
     *inside* it is not enough — the container itself is a block sitting at the
     left edge of a wider card, so the button ends up visibly off-centre and
     the divider below stops short of the form. Releasing the width and
     centring the children instead puts the button in the middle of the card
     and lets the rule span the full form. The Google button keeps its own
     natural width: it is a flex child of a column with align-items:center, so
     it is centred, not stretched. (Reported on Eden 2026-08-05.) */
  width: 100%;
  max-width: none;
}

/* "or" divider between the Google button and the email form.
   ---------------------------------------------------------
   The word is rendered in PHP, not as a CSS `content:` string, so it can be
   translated. See CC_Account_Page::social_divider().

   Hidden by default and revealed only when Site Kit's container is NOT empty.
   That container is empty at page render — Google's script fills it in later,
   or never, if the script is blocked or fails. `:not(:empty)` re-evaluates
   when Google injects the button, so a blocked script leaves no orphan "or"
   floating above the username field.

   Two pseudo-elements draw the flanking rules. Deliberately not the usual
   "text with a background colour masking a line behind it" trick: Forgebury's
   --cc-surface is a translucent glass value (rgba(255,255,255,0.62)), so a
   mask painted in it would let the line show faintly through the word. Real
   flex children have no such problem on any of the three brands. */

.cc-account__or {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1;
  color: var(--cc-text-muted, #6e6e73);
}

.cc-account .googlesitekit-sign-in-with-google__frontend-output-button:not(:empty) + .cc-account__or {
  display: flex;
}

.cc-account__or::before,
.cc-account__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--cc-border-subtle, #e0e0e0);
}

/* ── Wide viewports ───────────────────────────────────────────────────── */

/* 440px is a phone-first width and looks pinched on a desktop monitor, where
   the card is the only thing on the page. Widened rather than rebuilt: only
   the custom property moves, so every rule above still derives from it. */
@media (min-width: 782px) {
  .cc-account { --cc-account-max: 520px; }

  .cc-account__card { padding: 36px 34px 34px; }
}

/* ── Theme page title ─────────────────────────────────────────────────── */

/* The theme prints its own "My account" heading above this card, which the
   card's own heading already says. Scoped to .cc-account-page — a body class
   this module adds only when logged out — so a logged-in customer keeps the
   heading on their dashboard.

   Selector list is deliberately short: WordPress's two conventional title
   classes plus Astra's, which is the theme in use across the estate. A theme
   that names its title something else keeps it, which is the safe failure:
   a redundant heading, not a missing one. */
.cc-account-page .entry-title,
.cc-account-page .page-title,
.cc-account-page .ast-archive-title,
.cc-account-page .woocommerce-products-header__title {
  display: none;
}

/* ── Narrow viewports ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .cc-account { padding: 0 0 32px; }

  /* Near-full-bleed, but never edge-to-edge: the card keeps a gutter so the
     border reads as a card rather than as a stray horizontal rule. */
  .cc-account__card {
    padding: 26px 18px 24px;
    border-radius: var(--cc-radius-card, 16px);
  }

  .cc-account__tab {
    padding: 11px 8px;
    font-size: 14px;
  }
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cc-account .cc-account__tab,
  .cc-account .cc-account__card input,
  .cc-account .cc-account__card button {
    transition: none;
  }
}