/* ============================================================
   CHOOSE LIFE EXPRESS — Account Dashboard styles
   Ported from CLE_Dashboard_Wireframe_v5.html.
   Every rule is scoped under .cle-acct so it cannot affect the
   Sage theme, homepage search, or archive filters.
   :root design tokens are global so you can re-skin in one place.
   ============================================================ */
:root {
  --color-brand: #3d566e;
  --color-brand-dark: #2c3e52;
  --color-brand-light: #e8eef3;
  --color-brand-xlight: #f2f5f8;

  --color-accent: #4a7fa5;
  --color-accent-light: #ddeaf3;

  --color-success: #2e7d5e;
  --color-success-bg: #e6f3ee;
  --color-warn: #b07320;
  --color-warn-bg: #fdf3e3;
  --color-danger: #a33030;
  --color-danger-bg: #fceaea;

  --color-surface: #ffffff;
  --color-bg: #f4f5f6;
  --color-border: #d5dde3;
  --color-border-strong: #b8c4cc;

  --color-text: #2c3e52;
  --color-text-muted: #6b7f8e;
  --color-text-faint: #9aaab5;

  --font:
    Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  /* Aug 2026 dashboard-edits task: scale raised one step across the board
      so card content reads comfortably (was 14/16/20). */
  --font-size-xs: 18px;
  --font-size-sm: 16px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 30px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  --topbar-height: 48px;
  --topbar-bg: var(--color-brand);
  --sidebar-width: 270px;
  --sidebar-bg: var(--color-bg);
}

.cle-acct {
  background: var(--color-surface);
  border: none;
  border-radius: 0;
  overflow: hidden;
  /* Aug 2026 dashboard-edits task: narrower app column so the cards are
      less wide/horizontal and their (now larger) content dominates. */
  max-width: 880px;
  margin: 0 auto;
}

.cle-acct .tb {
  background: var(--topbar-bg);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
}

/* The wordmark is a link back out to the storefront. It was a <div>, so it
   needs the anchor resets — the theme's global link styles would otherwise
   underline it and override the white.

   Must NOT be inline-flex: that makes "CHOOSE LIFE " and <em>EXPRESS</em>
   separate flex items, and flexbox drops the whitespace between them, closing
   up the gap. Normal inline flow (inline-block) keeps it. Vertical centring is
   already handled by the flex parent. */
.cle-acct .tb-logo {
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin-left: -4px;
  transition: opacity 0.15s;
}

.cle-acct a.tb-logo:hover,
.cle-acct a.tb-logo:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

.cle-acct a.tb-logo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.cle-acct .tb-logo em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.6;
}

/* Not guaranteed to exist in the Sage theme, so define it scoped. */
.cle-acct .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cle-acct .tb-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.cle-acct .tb-nav button {
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font-family: var(--font);
  font-weight: 400;
  transition: 0.12s;
}

.cle-acct .tb-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.cle-acct .tb-nav button.on {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 500;
}

.cle-acct .tb-r {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cle-acct .bell {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: #fff;
  font-size: var(--font-size-xs);
  font-family: var(--font);
  font-weight: 500;
}

.cle-acct .bell i {
  font-size: 14px;
}

.cle-acct .bell:hover {
  background: rgba(255, 255, 255, 0.24);
}

.cle-acct .userbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: #fff;
  font-size: var(--font-size-xs);
  font-family: var(--font);
}

.cle-acct .userbtn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.cle-acct .av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.cle-acct .sc {
  display: none;
}

.cle-acct .sc.on {
  display: block;
}

.cle-acct .pb {
  padding: 20px;
  background: var(--color-bg);
  min-height: 440px;
}

.cle-acct .card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.cle-acct .card + .card {
  margin-top: var(--space-3);
}

.cle-acct .card-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cle-acct .card-title a {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.cle-acct .g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.cle-acct .mb3 {
  margin-bottom: var(--space-3);
}

.cle-acct .bnr {
  background: var(--color-warn-bg);
  border: 0.5px solid #e8c070;
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.cle-acct .bnr-l {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-warn);
}

.cle-acct .bnr-l i {
  font-size: 14px;
  flex-shrink: 0;
}

.cle-acct .bnr-l strong {
  display: block;
  font-size: var(--font-size-sm);
}

.cle-acct .ck {
  background: var(--color-brand-light);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  margin-bottom: var(--space-3);
}

.cle-acct .ck-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cle-acct .ck-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cle-acct .ck-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
}

.cle-acct .ck-item.done {
  color: var(--color-success);
  border-color: #b2d8c8;
}

.cle-acct .ck-item i {
  font-size: 16px;
}

.cle-acct .cr-total {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.cle-acct .cr-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cle-acct .cr-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.cle-acct .cr-lbl {
  color: var(--color-text-muted);
}

.cle-acct .cr-val {
  font-weight: 600;
  color: var(--color-text);
}

.cle-acct .cr-exp {
  font-size: 14px;
  color: var(--color-warn);
  white-space: nowrap;
}

.cle-acct .exp-flag {
  background: var(--color-warn-bg);
  color: var(--color-warn);
  font-size: 14px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.cle-acct .cr-meta {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--color-text-faint);
}

.cle-acct .o-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cle-acct .o-row {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
}

.cle-acct .o-name {
  font-weight: 500;
  font-size: var(--font-size-base);
}

.cle-acct .o-date {
  font-size: 15px;
  color: var(--color-text-faint);
  margin-top: 1px;
}

.cle-acct .pill {
  font-size: 14px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

.cle-acct .pill-ready {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.cle-acct .pill-progress {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.cle-acct .pill-sub {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.cle-acct .pill-active {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.cle-acct .pill-paid {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.cle-acct .pill-failed {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.cle-acct .pill-default {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.cle-acct .rp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Spans all three columns so the card never renders as a blank strip. */
.cle-acct .rp-empty {
  grid-column: 1 / -1;
  padding: var(--space-5);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 0.5px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.cle-acct .rp-item {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.cle-acct .rp-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--color-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cle-acct .rp-thumb i {
  font-size: 18px;
  color: var(--color-brand);
  opacity: 0.4;
}

.cle-acct .rp-info {
  padding: 10px 15px;
}

.cle-acct .rp-name {
  font-size: var(--font-size-base);
  font-weight: 500;
}

.cle-acct .rp-meta {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.cle-acct .usage-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.cle-acct .usage-bar-wrap {
  flex: 1;
}

.cle-acct .usage-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  margin-bottom: 4px;
}

.cle-acct .usage-labels span {
  color: var(--color-text-muted);
}

.cle-acct .usage-labels strong {
  color: var(--color-text);
}

.cle-acct .usage-track {
  height: 8px;
  border-radius: 3px;
  background: var(--color-bg);
  overflow: hidden;
  border: 0.5px solid var(--color-border);
}

.cle-acct .usage-fill {
  height: 100%;
  width: 42%;
  background: var(--color-brand);
  border-radius: 3px;
}

.cle-acct .usage-aside {
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cle-acct .usage-aside strong {
  color: var(--color-brand);
  display: block;
}

.cle-acct .acol {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 440px;
}

.cle-acct .lnav {
  background: var(--sidebar-bg);
  border-right: 0.5px solid var(--color-border);
  padding: 8px 0;
}

.cle-acct .lnav-sec {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px 3px;
}

.cle-acct .lnav-item {
  padding: 10px 15px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 2px solid transparent;
  transition: 0.1s;
}

.cle-acct .lnav-item:hover {
  color: var(--color-text);
  background: var(--color-brand-light);
}

.cle-acct .lnav-item.on {
  color: var(--color-brand);
  font-weight: 600;
  border-left: 5px solid var(--color-brand);
  background: var(--color-brand-light);
}

.cle-acct .lnav-item i {
  font-size: 18px;
}

.cle-acct .lnav-badge {
  font-size: 14px;
  background: var(--color-warn);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
}

.cle-acct .rpanel {
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
}

.cle-acct .breadcrumb {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 3px;
  background-color: transparent;
  border-radius: 0;
}

.cle-acct .breadcrumb span {
  cursor: pointer;
}

.cle-acct .breadcrumb span:hover {
  color: var(--color-brand);
}

.cle-acct .breadcrumb i {
  font-size: 14px;
}

.cle-acct .page-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 2px;
}

.cle-acct .page-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.cle-acct .sub-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.cle-acct .divider {
  height: 0.5px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}

.cle-acct .sec-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.cle-acct .success-bar {
  background: var(--color-success-bg);
  border: 0.5px solid #b2d8c8;
  border-radius: var(--radius-md);
  padding: 7px 10px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-success);
}

.cle-acct .success-bar i {
  font-size: 16px;
}

/* Same shape as .success-bar, warn palette — shown on the Profile form when
   the center profile still has fields outstanding. */
.cle-acct .pending-bar {
  background: var(--color-warn-bg);
  border: 0.5px solid #e8c98f;
  border-radius: var(--radius-md);
  padding: 7px 10px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-warn);
}

.cle-acct .pending-bar i {
  font-size: 16px;
}

.cle-acct .form-row {
  margin-bottom: var(--space-3);
}

.cle-acct .form-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 3px;
  display: block;
}

.cle-acct .form-input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font);
}

.cle-acct .form-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand-light);
}

.cle-acct .form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cle-acct .form-hint {
  font-size: 14px;
  color: var(--color-text-faint);
  margin-top: 8px;
}

.cle-acct .pw-wrap {
  position: relative;
}

.cle-acct .pw-wrap .form-input {
  padding-right: 30px;
}

.cle-acct .pw-eye {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
}

.cle-acct .upload-zone {
  display: block;
  position: relative;
  border: 0.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
  background: var(--color-bg);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}

.cle-acct .upload-zone:hover,
.cle-acct .upload-zone.is-drag,
.cle-acct .logo-file:focus-visible + .upload-zone {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.cle-acct .upload-zone.is-drag {
  background: var(--color-brand-xlight);
}

.cle-acct .upload-zone i {
  font-size: 16px;
  display: block;
  margin-bottom: 3px;
}

/* --- Center logo field ------------------------------------------------ */

/* The display rules below are author styles, so they outrank the browser's
   default [hidden] { display: none }. Restate it at higher specificity or the
   empty preview, progress bar and action links would all show through. */
.cle-acct .logo-preview[hidden],
.cle-acct .logo-bar[hidden],
.cle-acct .logo-actions[hidden],
.cle-acct .logo-msg[hidden] {
  display: none;
}

/* Visually hidden, but still focusable and still submitted with the form
   (a display:none input would drop out of the keyboard order). */
.cle-acct .logo-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cle-acct .logo-preview {
  display: block;
  margin-bottom: var(--space-2);
}

.cle-acct .logo-preview img {
  max-height: 56px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.cle-acct .logo-cta {
  display: block;
}

.cle-acct .upload-zone.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

.cle-acct .logo-bar {
  display: block;
  height: 3px;
  margin-top: var(--space-2);
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.cle-acct .logo-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-brand);
  transition: width 0.2s ease;
}

.cle-acct .logo-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.cle-acct .logo-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-brand);
  cursor: pointer;
  text-decoration: underline;
}

.cle-acct .logo-link.danger {
  color: var(--color-danger);
}

.cle-acct .logo-msg {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-success);
}

.cle-acct .logo-msg.is-error {
  color: var(--color-danger);
}

.cle-acct .btn-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.cle-acct .btn, .woocommerce .woocommerce-MyAccount-content .button {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font);
}

.cle-acct .btn:hover, .woocommerce .woocommerce-MyAccount-content .button:hover {
  background: var(--color-bg);
  color: #000;
}

.cle-acct .btn.primary, .woocommerce .woocommerce-MyAccount-content .button {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

.cle-acct .btn.primary:hover, .woocommerce .woocommerce-MyAccount-content .button:hover {
  background: var(--color-brand-dark);
  color: #fff;
}

.cle-acct .btn.danger {
  color: var(--color-danger);
  border-color: #e8b0b0;
}

.cle-acct .btn-xs {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font);
}

.cle-acct .btn-xs.primary {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

.cle-acct .btn-xs:hover {
  background: var(--color-bg);
}

.cle-acct .icon-btn {
  padding: 3px 6px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
}

.cle-acct .icon-btn:hover {
  color: var(--color-text);
  background: var(--color-bg);
}

.cle-acct .pay-row {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.cle-acct .pay-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Card brand badge. Sized by its label (VISA / MC / AMEX ...), never a fixed
   32px box - "MASTERCARD" at 16px used to spill out over the card name. */
.cle-acct .card-icon {
  flex: 0 0 auto;
  min-width: 40px;
  height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border: 0.5px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--color-text-muted);
}

.cle-acct .pay-info > div {
  min-width: 0;
}

.cle-acct .pay-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.cle-acct .pay-exp {
  font-size: 14px;
  color: var(--color-text-muted);
}

.cle-acct .plan-current {
  border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
}

.cle-acct .plan-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-brand);
}

.cle-acct .plan-price {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-brand);
}

.cle-acct .plan-price em {
  font-size: var(--font-size-sm);
  font-weight: 400;
  font-style: normal;
  color: var(--color-text-muted);
}

.cle-acct .plan-renew {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cle-acct .plan-features {
  list-style: none;
  margin-top: var(--space-3);
}

.cle-acct .plan-features li {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.cle-acct .plan-features li i {
  font-size: 14px;
  color: var(--color-success);
  margin-top: 1px;
  flex-shrink: 0;
}

/* 3-up on desktop, 2-up / 1-up as the panel narrows - the fixed 3 columns
   used to run off-screen on phones (grid wider than the viewport). */
.cle-acct .plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.cle-acct .plan-card {
  min-width: 0;
}

.cle-acct .plan-card {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  cursor: pointer;
  position: relative;
  background: var(--color-surface);
}

.cle-acct .plan-card:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-xlight);
}

.cle-acct .plan-card.current {
  border-color: var(--color-brand);
}

.cle-acct .plan-tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 0 0 4px 4px;
  white-space: nowrap;
}

.cle-acct .plan-card-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-brand);
  margin-top: 10px;
}

.cle-acct .plan-card-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-brand);
  margin-top: 5px;
}

.cle-acct .plan-card-price em {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: var(--color-text-muted);
}

.cle-acct .plan-card-desc {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 10px 0 15px;
  line-height: 1.4;
}

a.cle-sub-btn.btn.primary {
  font-size: 18px !important;
}

/* First-year promo on the plan cards (annual view only) */
.cle-acct .plan-card-price .was {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-right: 4px;
}
.cle-acct .save-box.promo-box {
  color: #8A6A2A;
  background: #FBF6EA;
}
.cle-acct .save-box.promo-box strong {
  color: #8A6A2A;
}
.cle-acct .save-box.promo-box small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.cle-acct .save-box[hidden],
.cle-acct .promo-box[hidden] {
  display: none;
}

.cle-acct .save-box {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 15px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.cle-acct .save-box strong {
  color: var(--color-brand);
}

.cle-acct .filter-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.cle-acct .filter-row select {
  padding: 4px 7px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  background: var(--color-surface);
  font-family: var(--font);
}

.cle-acct .asset-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}

.cle-acct .asset-thumb {
  width: 38px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cle-acct .asset-thumb i {
  font-size: 16px;
  color: var(--color-brand);
  opacity: 0.5;
}

.cle-acct .asset-info {
  flex: 1;
}

.cle-acct .asset-name {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.cle-acct .asset-meta {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.cle-acct .asset-tags {
  display: flex;
  gap: 3px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.cle-acct .asset-tag {
  font-size: 14px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 0.5px solid var(--color-border);
}

.cle-acct .dropbox-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: #0061ff;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  text-decoration: none;
}

.cle-acct .dropbox-btn i {
  font-size: 16px;
}

.cle-acct .bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}

.cle-acct .bill-desc {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.cle-acct .bill-date {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.cle-acct .bill-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cle-acct .bill-amt {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-brand);
}

.cle-acct .addr-card {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--color-surface);
}

.cle-acct .addr-type {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}

.cle-acct .addr-lines {
  font-size: var(--font-size-xs);
  color: var(--color-text);
  line-height: 1.5;
}

.cle-acct .ref-box {
  background: var(--color-brand-light);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.cle-acct .ref-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.cle-acct .ref-link-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.cle-acct .ref-link {
  flex: 1;
  padding: 6px 9px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  background: var(--color-surface);
  color: var(--color-accent);
}

.cle-acct .ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.cle-acct .ref-stat {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 8px;
  text-align: center;
  border: 0.5px solid var(--color-border);
}

.cle-acct .ref-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-brand);
}

.cle-acct .ref-stat-lbl {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.cle-acct .notif-item {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}

.cle-acct .notif-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.cle-acct .notif-icon.warn {
  background: var(--color-warn-bg);
  color: var(--color-warn);
}

.cle-acct .notif-icon.info {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.cle-acct .notif-icon.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.cle-acct .notif-body {
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.cle-acct .notif-body strong {
  display: block;
  margin-bottom: 2px;
}

.cle-acct .notif-time {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.cle-acct .notif-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cle-acct .notif-item.dimmed {
  opacity: 0.45;
}

.cle-acct .saved-price-warn {
  font-size: 14px;
  color: var(--color-warn);
  font-weight: 500;
  margin-top: 2px;
}

/* ============================================================
   SUPPLEMENTAL — top tab strip + HIDE WooCommerce account nav
   ============================================================ */

/* Top tab strip anchors (the wireframe nav lives here now) */
.cle-acct .tb-nav a.cle-tab {
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 400;
  transition: 0.12s;
}

.cle-acct .tb-nav a.cle-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.cle-acct .tb-nav a.cle-tab.on {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 500;
}

.cle-acct .bell,
.cle-acct .userbtn {
  text-decoration: none;
}

.cle-acct .tb {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cle-acct .pb {
  padding: 20px 24px;
}

/* HIDE the WooCommerce account navigation everywhere. It is replaced by the
   top tab strip. `body` is included to outrank any theme rule.
   To bring the sidebar back, define CLE_ACCOUNT_SHOW_NAV in wp-config.php. */
body .woocommerce-account nav.woocommerce-MyAccount-navigation,
body .woocommerce-account .woocommerce-MyAccount-navigation {
  display: none !important;
}

/* Two-column sub-pages: .rpanel supplies the padding, so neutralize the
   .pb wrapper that the shared templates use (full-bleed pages keep .pb). */
.cle-acct .rpanel .pb {
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}

.cle-acct .acol {
  background: var(--color-bg);
}

/* Sidebar items are now anchors (real links) — drop the underline. */
.cle-acct .lnav-item {
  text-decoration: none;
}

/* ============================================================
   HOOK-BASED LAYOUT: connect the top strip card and the content
   card into one frame, and neutralize the theme's content float.
   ============================================================ */

/* The theme floats/sizes .woocommerce-MyAccount-content (e.g. width:70%);
   our content card lives inside it, so force it full width. */
body .woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Two stacked .cle-acct cards (top strip + content) read as one card. */
.cle-acct.cle-topwrap {
  max-width: 880px;
  margin: 0 auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
}

.cle-acct.cle-innerwrap {
  max-width: 880px;
  margin: 0 auto;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 0;
}

.cle-acct.cle-topwrap .tb {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

button.bt-opt {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-family: var(--font);
  width: auto;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  background: var(--color-brand);
  color: #fff;
  border: none;
  display: inline-block;
}
.col-lg-10.mx-auto .woocommerce section:not(.saving-lives-text) {
  padding: 20px 0;
}
/* ============================================================
   CLE Account Dashboard — June task additions
   (placeholder fix, narrow password fields, strength meter,
   thumbnails, download button, credit-usage ledger, dismiss)
   ============================================================ */

body.woocommerce-page .woocommerce form .form-row ::placeholder,
body .woocommerce-page .woocommerce form .form-row ::placeholder {
  font-size: var(--font-size-sm) !important;
  color: var(--color-text) !important;
  font-weight: 400 !important;
  opacity: 1;
}
.cle-acct .form-input::placeholder,
.cle-acct .form-input::-webkit-input-placeholder,
.cle-acct .form-input::-moz-placeholder,
.cle-acct .form-input:-ms-input-placeholder,
.woocommerce-account
  .woocommerce-MyAccount-content
  .cle-acct
  form
  .form-row
  ::placeholder,
.woocommerce-account
  .woocommerce-MyAccount-content
  .cle-acct
  form
  .form-row
  ::-webkit-input-placeholder,
.woocommerce-account
  .woocommerce-MyAccount-content
  .cle-acct
  form
  .form-row
  ::-moz-placeholder,
.woocommerce-account
  .woocommerce-MyAccount-content
  .cle-acct
  form
  .form-row
  :-ms-input-placeholder,
html .woocommerce-page .woocommerce form .form-row ::placeholder {
  font-size: var(--font-size-sm) !important;
  color: var(--color-text) !important;
  font-weight: 400 !important;
  opacity: 1;
}
.cle-acct .form-input::placeholder {
  font-size: var(--font-size-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text-faint) !important;
  opacity: 1;
}
.cle-acct .form-input::-webkit-input-placeholder {
  font-size: var(--font-size-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text-faint) !important;
  opacity: 1;
}
.cle-acct .form-input::-moz-placeholder {
  font-size: var(--font-size-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text-faint) !important;
  opacity: 1;
}
.cle-acct .form-input:-ms-input-placeholder {
  font-size: var(--font-size-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text-faint) !important;
  opacity: 1;
}

p#shipping_phone_field {
  display: none;
}
html .woocommerce-page .woocommerce form .form-row .input-text,
html .woocommerce-page .woocommerce form .form-row select,
html .select2-container .select2-dropdown,
html .select2-container .select2-selection {
  width: 100%;
  padding: 6px 9px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font);
}

/* --- Task 1: keep password fields a sensible width, not full-bleed ------- */
.cle-acct .pw-form .form-row,
.cle-acct .pw-form .divider,
.cle-acct .pw-form .pw-strength {
  max-width: 420px;
}

/* --- Credit usage: period toggle (This month / All time) ----------------- */
.cle-acct .usage-period {
  display: inline-flex;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 var(--space-3);
}
.cle-acct .up-btn {
  border: 0;
  background: #fff;
  padding: 6px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.cle-acct .up-btn + .up-btn {
  border-left: 0.5px solid var(--color-border);
}
.cle-acct .up-btn.on {
  background: var(--color-brand);
  color: #fff;
}

/* --- Account dropdown menu (topbar) -------------------------------------- */
.cle-acct .userwrap {
  position: relative;
}
.cle-acct .user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 60;
}
.cle-acct .user-menu button,
.cle-acct .user-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cle-acct .user-menu button:hover,
.cle-acct .user-menu a:hover {
  background: var(--color-brand-light);
}
.cle-acct .user-menu a {
  margin-top: 4px;
  border-top: 0.5px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--color-danger);
}

/* --- Task 3: password-strength meter (label + descriptor + bar) ---------- */
.cle-acct .pw-strength {
  margin: var(--space-2) 0 var(--space-3);
}
.cle-acct .pw-strength-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cle-acct .pw-strength-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.cle-acct .pw-strength-word {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-faint);
}
.cle-acct .pw-strength-track {
  height: 5px;
  border-radius: 3px;
  background: var(--color-bg);
  overflow: hidden;
  border: 0.5px solid var(--color-border);
}
.cle-acct .pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--color-border-strong);
  transition:
    width 0.18s ease,
    background 0.18s ease;
}

/* --- Getting-started: dismiss (X) ---------------------------------------- */
.cle-acct .ck {
  position: relative;
}
.cle-acct .ck-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.cle-acct .ck-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

/* --- Thumbnails in tiles (asset library, orders, new-on-site) ------------ */
.cle-acct .asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.cle-acct .rp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cle-acct .o-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cle-acct .o-thumb {
  width: 34px;
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-brand-light);
}
.cle-acct .o-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Generic download button (replaces the Dropbox-branded one) ---------- */
.cle-acct .download-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--color-brand);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s;
}
.cle-acct .download-btn:hover {
  background: var(--color-brand-dark);
}
.cle-acct .download-btn i {
  font-size: 14px;
}
.cle-acct .download-btn.is-disabled {
  background: var(--color-bg);
  color: var(--color-text-faint);
  border: 0.5px solid var(--color-border);
  cursor: not-allowed;
}

/* --- Credit usage ledger screen ------------------------------------------ */
.cle-acct .usage-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.cle-acct .usage-sum-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.cle-acct .usage-sum-val {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-brand);
}
.cle-acct .usage-sum-val.in {
  color: var(--color-success);
}
.cle-acct .usage-sum-val.out {
  color: var(--color-warn);
}
.cle-acct .usage-sum-lbl {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.cle-acct .ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 2px;
  border-bottom: 0.5px solid var(--color-border);
}
.cle-acct .ledger-row:last-child {
  border-bottom: none;
}
.cle-acct .ledger-name {
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.cle-acct .ledger-date {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.cle-acct .ledger-amt {
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}
.cle-acct .ledger-amt.in {
  color: var(--color-success);
}
.cle-acct .ledger-amt.out {
  color: var(--color-warn);
}

/* --- Billing: credit chip ------------------------------------------------ */
.cle-acct .credit-chip {
  font-size: 14px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-light);
  color: var(--color-brand);
  border: 0.5px solid var(--color-border);
  white-space: nowrap;
}

/* Mobile: stack the usage summary cards */
@media (max-width: 560px) {
  .cle-acct .usage-summary {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   INVOICE (native view-order page)
   ============================================================ */

.cle-acct .breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 16px 0;
  flex-wrap: wrap;
}

.cle-acct .breadcrumb-row .breadcrumb {
  padding: 0;
}

/* --- Edit 2: reclaim the blank space on the invoice -------------------
   The native order-details markup carries the theme's own heading and
   section margins, which stack up inside our much tighter frame and leave
   large empty bands between the order line, the totals table, and the
   addresses. The observed gaps are ~125px, i.e. a deliberate theme heading
   rule rather than an incidental margin.

   !important is used here for the same reason as the nav rule further down:
   a theme selector like `.woocommerce-account .woocommerce h2` (three
   classes) out-specifies anything we can reasonably write, and these rules
   are scoped tightly to .cle-native so they cannot leak beyond the native
   WooCommerce pages we are framing. */

.cle-acct .cle-native > :first-child {
  margin-top: 0 !important;
}

.cle-acct .cle-native p:empty,
.cle-acct .cle-native div:empty:not([class]),
.cle-acct .cle-native br + br {
  display: none !important;
}

.cle-acct .cle-native h1,
.cle-acct .cle-native h2,
.cle-acct .cle-native h3 {
  margin: 0 0 var(--space-4) !important;
  line-height: 1.25;
}

.cle-acct .cle-native p,
.cle-acct .cle-native section,
.cle-acct .cle-native .woocommerce-order-details,
.cle-acct .cle-native .woocommerce-customer-details,
.cle-acct .cle-native .woocommerce-columns,
.cle-acct .cle-native .woocommerce-column,
.cle-acct .cle-native .woocommerce-order-details__title,
.cle-acct .cle-native .woocommerce-customer-details__title,
.cle-acct .cle-native .woocommerce-column__title {
  margin-top: 0 !important;
  margin-bottom: var(--space-4) !important;
  padding: 10px 0;
}

.cle-acct .cle-native .woocommerce-order-details:last-child,
.cle-acct .cle-native .woocommerce-customer-details:last-child {
  margin-bottom: 0 !important;
}

.cle-acct .cle-native table {
  margin-bottom: var(--space-4) !important;
}

/* --- Order details table: same design language as the checkout "Your
   order" review and the cart Order summary (Sept 2026 task).
   Tinted panel, Inter/Poppins, uppercase column heads, hairline row
   separators, right-aligned amounts, navy bold total row. */

.cle-acct .cle-native .woocommerce-order-details {
  background: #f2f5f8;
  border: 1px solid #dce3e9;
  padding: 24px !important;
}

.cle-acct .cle-native .woocommerce-order-details__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #2c4d6e;
  letter-spacing: -0.01em;
  padding: 0;
}

.cle-acct .cle-native table.order_details {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  box-shadow: none;
  margin: 0 !important;
  font-family: "Inter", system-ui, sans-serif;
}

.cle-acct .cle-native table.order_details thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #536c83;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dce3e9;
  padding: 10px 0;
  text-align: left;
}

.cle-acct .cle-native table.order_details th,
.cle-acct .cle-native table.order_details td {
  font-size: 14.5px;
  color: #1c2733;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eef2f5;
  padding: 12px 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}

.cle-acct .cle-native table.order_details thead th:last-child,
.cle-acct .cle-native table.order_details td:last-child {
  text-align: right;
}

.cle-acct .cle-native table.order_details td .amount {
  white-space: nowrap;
  color: inherit;
}

.cle-acct .cle-native table.order_details .product-name a {
  color: #2c4d6e;
  font-weight: 600;
  text-decoration: none;
}

.cle-acct .cle-native table.order_details .product-name a:hover {
  text-decoration: underline;
}

.cle-acct .cle-native table.order_details .product-quantity {
  color: #4b5a68;
  font-weight: 400;
}

.cle-acct .cle-native table.order_details tfoot th {
  font-weight: 600;
}

.cle-acct .cle-native table.order_details tfoot tr:last-child th,
.cle-acct .cle-native table.order_details tfoot tr:last-child td {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  color: #2c4d6e;
  font-size: 16px;
  border-bottom: none;
  padding-top: 14px;
}

/* Item meta (WCPA fields: First Name, Email, Center Logo, ...): compact
   tinted box, label/value on one line - identical to the cart item's
   .variation block instead of the tall stacked rows. */
.cle-acct .cle-native table.order_details ul.wc-item-meta,
.cle-acct .cle-native table.order_details dl.variation {
  margin: 10px 0 0;
  padding: 10px 12px;
  list-style: none;
  background: #f7fafd;
  border: 1px solid #eef2f6;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
}

.cle-acct .cle-native table.order_details ul.wc-item-meta li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
}

.cle-acct .cle-native table.order_details ul.wc-item-meta li:last-child {
  margin-bottom: 0;
}

.cle-acct .cle-native table.order_details ul.wc-item-meta .wc-item-meta-label {
  flex: 0 1 auto;
  min-width: 0;
  float: none;
  width: auto;
  max-width: none;
  font-weight: 600;
  color: #5b6c7d;
  margin: 0;
  padding: 0;
}

/* The generic .cle-native p spacing rule above (blank-space reclaim) uses
   !important margins, so the meta values need !important to stay compact. */
.cle-acct .cle-native table.order_details ul.wc-item-meta li p {
  margin: 0 !important;
  padding: 0 !important;
  display: inline;
  color: #1c2733;
  font-weight: 600;
  word-break: break-word;
}

.cle-acct .cle-native table.order_details ul.wc-item-meta a,
.cle-acct .cle-native table.order_details dl.variation a {
  color: #2c4d6e;
  word-break: break-all;
}

.cle-acct .cle-native table.order_details dl.variation dt {
  float: left;
  clear: left;
  margin: 0 6px 0 0;
  font-weight: 600;
  color: #5b6c7d;
}

.cle-acct .cle-native table.order_details dl.variation dd {
  margin: 0 0 2px;
  color: #1c2733;
  font-weight: 600;
}

.cle-acct .cle-native table.order_details dl.variation dd p {
  margin: 0;
}

/* Addresses under the order: same card tokens. */
.cle-acct .cle-native .woocommerce-customer-details .woocommerce-column__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #2c4d6e;
  letter-spacing: -0.01em;
}

.cle-acct .cle-native .woocommerce-customer-details address {
  background: #fff;
  border: 1px solid #dce3e9;
  border-radius: 0;
  padding: 16px 18px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-style: normal;
  color: #1c2733;
  line-height: 1.6;
}

/* --- Orders list (my-account/orders): same table language as the
   checkout review / order-details tables. Tinted header band, hairline
   row separators, navy links, outline "View" action button. */

.cle-acct .cle-native table.account-orders-table {
  width: 100%;
  background: #fff;
  border: 1px solid #dce3e9;
  border-radius: 0;
  border-collapse: collapse;
  box-shadow: none;
  font-family: "Inter", system-ui, sans-serif;
}

.cle-acct .cle-native table.account-orders-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #536c83;
  background: #f2f5f8;
  border: 0;
  border-bottom: 1px solid #dce3e9;
  padding: 12px 16px;
  text-align: left;
}

.cle-acct .cle-native table.account-orders-table tbody th,
.cle-acct .cle-native table.account-orders-table tbody td {
  font-size: 14.5px;
  color: #1c2733;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eef2f5;
  padding: 14px 16px;
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}

.cle-acct .cle-native table.account-orders-table tbody tr:last-child th,
.cle-acct .cle-native table.account-orders-table tbody tr:last-child td {
  border-bottom: 0;
}

.cle-acct
  .cle-native
  table.account-orders-table
  .woocommerce-orders-table__cell-order-number
  a {
  color: #2c4d6e;
  font-weight: 600;
  text-decoration: none;
}

.cle-acct
  .cle-native
  table.account-orders-table
  .woocommerce-orders-table__cell-order-number
  a:hover {
  text-decoration: underline;
}

.cle-acct .cle-native table.account-orders-table time {
  color: #4b5a68;
}

.cle-acct
  .cle-native
  table.account-orders-table
  .woocommerce-orders-table__cell-order-status {
  font-weight: 600;
  color: #536c83;
}

.cle-acct
  .cle-native
  table.account-orders-table
  .woocommerce-orders-table__cell-order-total
  .amount {
  font-weight: 600;
  color: #2c4d6e;
  white-space: nowrap;
}

/* "View" action: secondary outline button (drawer/cart secondary style). */
.cle-acct .cle-native table.account-orders-table a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 0;
  border: 1.5px solid #dce3e9;
  background: transparent;
  color: #2c4d6e;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease;
  margin: 0 0 0 6px;
}

.cle-acct .cle-native table.account-orders-table a.button:hover {
  border-color: #536c83;
  background: #f2f5f8;
  color: #2c4d6e;
}

@media (min-width: 768px) {
  .cle-acct .cle-native table.account-orders-table thead th:last-child,
  .cle-acct .cle-native table.account-orders-table tbody td:last-child {
    text-align: right;
  }
}

/* Mobile: WooCommerce's small-screen stylesheet stacks the row into a
   card but hides the order-number th - bring it back as the first line,
   using the same label/value pattern the stacked td's get. */
@media (max-width: 768px) {
  .cle-acct .cle-native table.account-orders-table tbody th {
    display: block !important;
    text-align: right;
  }

  .cle-acct .cle-native table.account-orders-table tbody th::before {
    content: "Order:";
    float: left;
    font-weight: 700;
  }
}

/* Print-only invoice header — hidden on screen, shown in the PDF. */
.cle-acct .cle-invoice-head {
  display: none;
}

/* ============================================================
   PRINT / SAVE AS PDF
   Only the invoice body should reach the page. The visibility
   approach is used rather than hiding known selectors, because the
   surrounding theme chrome is not ours and can change.
   ============================================================ */
@media print {
  body * {
    visibility: hidden !important;
  }

  .cle-acct .cle-native,
  .cle-acct .cle-native * {
    visibility: visible !important;
  }

  .cle-acct .cle-native {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    background: #fff;
  }

  /* The frame's rounded corners and clipping would cut the invoice off
      across a page break. */
  .cle-acct {
    overflow: visible;
    border: 0;
    max-width: none;
    margin: 0;
  }

  .cle-invoice-head {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d5dde3;
  }

  .cle-invoice-site {
    font-size: 15pt;
    font-weight: 700;
    color: #2c3e52;
  }

  .cle-invoice-logo {
    max-height: 56px;
    max-width: 180px;
    margin-top: 8px;
    display: block;
  }

  .cle-invoice-meta {
    text-align: right;
    font-size: 10pt;
    line-height: 1.5;
    color: #2c3e52;
  }

  /* Interactive chrome never belongs in a PDF. */
  .cle-no-print,
  .cle-acct .tb,
  .cle-acct .breadcrumb-row,
  .cle-acct .breadcrumb,
  .cle-acct .woocommerce-MyAccount-navigation,
  .cle-acct .button,
  .cle-acct .woocommerce-message,
  .cle-acct .woocommerce-info {
    display: none !important;
    visibility: hidden !important;
  }

  .cle-acct .cle-native table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
  }

  .cle-acct .cle-native tr {
    page-break-inside: avoid;
  }

  .cle-acct .cle-native a {
    text-decoration: none;
    color: inherit;
  }

  @page {
    margin: 14mm;
  }
}

/* ============================================================
   CLE Account Dashboard - MOBILE DESIGN (Aug 2026 task)
   Implements CLE_Dashboard_Mobile_Wireframe.html below 768px.
   Desktop is untouched: outside the media query the only rules
   are the ones hiding the mobile-only elements.
   ============================================================ */

/* Mobile-only elements: hidden everywhere by default. */
.cle-acct .cle-btm-nav {
  display: none;
}
.cle-acct .cle-mob-back {
  display: none;
}

@media (max-width: 767px) {
  /* ---- Wireframe tokens (scoped so desktop keeps its own) ---- */
  .cle-acct {
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 28px;
    --radius-sm: 7px;
    --radius-md: 8px;
    --radius-lg: 12px;
    max-width: 100%;
    overflow: visible; /* required for the sticky bottom nav */
    border-radius: 0;
  }
  .cle-acct.cle-topwrap,
  .cle-acct.cle-innerwrap {
    max-width: 100%;
  }

  /* ---- Top bar: logo + bell + avatar only ---- */
  .cle-acct .tb {
    height: 52px;
    padding: 0 16px;
  }
  .cle-acct .tb-nav {
    display: none;
  }
  .cle-acct .tb-logo {
    font-size: 14px;
  }
  .cle-acct .bell {
    padding: 7px 11px;
    border-radius: var(--radius-md);
    font-size: 13px;
  }
  .cle-acct .userbtn {
    font-size: 0;
    gap: 0;
    padding: 0;
    border: none;
    background: none;
  }
  .cle-acct .userbtn i {
    display: none;
  }
  .cle-acct .userbtn .av {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  /* ---- Content area ---- */
  .cle-acct .pb {
    padding: 14px;
    min-height: 0;
  }
  .cle-acct .page-title {
    font-size: 20px;
    margin-bottom: 4px;
  }
  .cle-acct .page-sub {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  .cle-acct .breadcrumb {
    display: none;
  } /* replaced by the back bar */

  /* ---- Cards ---- */
  .cle-acct .card {
    border-radius: var(--radius-lg);
    padding: 14px;
  }
  .cle-acct .card + .card {
    margin-top: 12px;
  }
  .cle-acct .card-title {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .cle-acct .card-title a {
    font-size: 13px;
  }
  .cle-acct .g2 {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  /* ---- Profile banner + checklist ---- */
  .cle-acct .bnr {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: var(--radius-lg);
    padding: 14px;
  }
  .cle-acct .bnr-l {
    align-items: flex-start;
  }
  .cle-acct .bnr > .btn-xs,
  .cle-acct .bnr button {
    align-self: flex-start;
    min-height: 36px;
  }
  .cle-acct .ck {
    border-radius: var(--radius-lg);
    padding: 12px 14px;
  }
  .cle-acct .ck-row {
    flex-direction: column;
    gap: 6px;
  }
  .cle-acct .ck-item {
    min-height: 40px;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
  }

  /* ---- Credit balance ---- */
  .cle-acct .cr-total {
    font-size: var(--font-size-xl);
    margin-bottom: 8px;
  }
  .cle-acct .cr-row {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
  }

  /* ---- Orders ---- */
  .cle-acct .o-list {
    gap: 7px;
  }
  .cle-acct .o-row {
    min-height: 52px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 0.5px solid var(--color-border);
  }

  /* ---- New on the site: grid becomes a thumb-left list ---- */
  .cle-acct .rp-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .cle-acct .rp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
  }
  .cle-acct .rp-thumb {
    width: 64px;
    height: 54px;
    flex: 0 0 64px;
    border-radius: 0;
  }
  .cle-acct .rp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cle-acct .rp-info {
    flex: 1;
    padding: 8px 8px 8px 0;
  }
  .cle-acct .rp-name {
    font-size: 13px;
  }
  .cle-acct .rp-meta {
    font-size: 12px;
  }

  /* ---- Usage tracker ---- */
  .cle-acct .usage-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cle-acct .usage-track {
    height: 7px;
    border-radius: 4px;
  }
  .cle-acct .usage-fill {
    border-radius: 4px;
  }
  .cle-acct .usage-aside {
    text-align: right;
    white-space: normal;
  }
  .cle-acct .usage-aside strong {
    display: inline;
  }

  /* ---- My Account: settings-list menu with drill-in sub-pages ---- */
  .cle-acct .acol {
    display: block;
    background: var(--color-bg);
  }
  .cle-acct .lnav {
    width: auto;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin: 14px;
    padding: 0;
    overflow: hidden;
  }
  .cle-acct .lnav-sec {
    padding: 10px 14px 5px;
    background: var(--color-bg);
    font-size: 11px;
  }
  .cle-acct .lnav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    min-height: 52px;
    font-size: 14px;
    border-radius: 0;
    border-bottom: 0.5px solid var(--color-border);
    background: transparent;
  }
  .cle-acct .lnav-item:last-child {
    border-bottom: none;
  }
  .cle-acct .lnav-item.on {
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 400;
  }
  .cle-acct .lnav-item::after {
    content: "\203A";
    margin-left: auto;
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-faint);
  }
  .cle-acct .lnav-badge {
    margin-left: 8px;
  }

  .cle-acct .rpanel {
    display: none;
    padding: 14px;
    background: var(--color-bg);
  }
  .cle-acct #sc-acct.is-sub-open .rpanel {
    display: block;
  }
  .cle-acct #sc-acct.is-sub-open .lnav {
    display: none;
  }
  .cle-acct #sc-acct.is-sub-open .cle-mob-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
  }
  .cle-acct .cle-mob-back i {
    font-size: 16px;
  }

  /* ---- Forms + buttons (44px touch targets) ---- */
  .cle-acct .sub-card {
    border-radius: var(--radius-lg);
    padding: 14px;
  }
  .cle-acct .form-2col {
    display: block;
  }
  .cle-acct .form-2col > div {
    margin-bottom: 12px;
  }
  .cle-acct .form-input {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: var(--radius-md);
  }
  .cle-acct .btn {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 14px;
    border-radius: var(--radius-md);
  }
  .cle-acct .btn-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }
  .cle-acct .btn-xs {
    min-height: 36px;
    border-radius: var(--radius-sm);
  }
  .cle-acct .icon-btn {
    min-height: 36px;
    min-width: 36px;
    border-radius: var(--radius-sm);
  }
  .cle-acct .upload-zone {
    padding: 18px;
    border-radius: var(--radius-md);
  }
  .cle-acct .success-bar,
  .cle-acct .pending-bar {
    border-radius: var(--radius-md);
  }

  /* ---- Subscription ---- */
  .cle-acct .plan-current {
    border-radius: var(--radius-lg);
    padding: 14px;
  }
  .cle-acct .plan-price {
    font-size: 26px;
  }
  .cle-acct .plan-opts {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .cle-acct .plan-card {
    min-height: 60px;
    border-radius: 10px;
    padding: 12px 14px;
  }

  /* ---- Payment / billing / addresses ---- */
  .cle-acct .pay-row {
    min-height: 56px;
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    gap: 8px;
  }
  .cle-acct .bill-row {
    min-height: 56px;
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 13px;
  }
  .cle-acct .addr-card {
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ---- Referral ---- */
  .cle-acct .ref-box {
    border-radius: var(--radius-lg);
  }
  .cle-acct .ref-link-row {
    flex-wrap: wrap;
  }
  .cle-acct .ref-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }

  /* ---- Asset library ---- */
  .cle-acct .filter-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .cle-acct .filter-row select {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-size: 13px;
  }
  .cle-acct .asset-row {
    flex-wrap: wrap;
    border-radius: var(--radius-md);
    padding: 12px 13px;
    gap: 10px;
  }
  .cle-acct .asset-thumb {
    width: 48px;
    height: 38px;
    border-radius: var(--radius-sm);
  }
  .cle-acct .download-btn {
    margin-left: auto;
    min-height: 40px;
    border-radius: var(--radius-sm);
  }

  /* ---- Notifications ---- */
  .cle-acct .notif-item {
    border-radius: var(--radius-md);
    padding: 13px;
  }
  .cle-acct .notif-actions .btn-xs {
    min-height: 36px;
  }

  /* ---- Bottom navigation (sticks to the viewport bottom) ---- */
  .cle-acct .cle-btm-nav {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 60;
    justify-content: space-around;
    background: var(--color-surface);
    border-top: 0.5px solid var(--color-border);
    padding: 8px 0 14px;
  }
  .cle-acct .cle-btm-nav .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 14px;
    min-width: 60px;
    min-height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font);
  }
  .cle-acct .cle-btm-nav .bn-item i {
    font-size: 24px;
  }
  .cle-acct .cle-btm-nav .bn-item.on {
    color: var(--color-brand);
  }
  .cle-acct .bn-badge {
    position: relative;
    display: inline-flex;
  }
  .cle-acct .bn-badge-dot {
    position: absolute;
    top: -1px;
    right: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-warn);
    border: 2px solid var(--color-surface);
  }
}