/* ==========================================================================
   HelpGent — "Store page" template styles (loaded after common.css)
   My Account and Receipt: the dark title band (.phero, common.css), then
   FluentCart's customer dashboard, its order receipt, or the login card
   when logged out, in the site container.
   FluentCart's own colours are pointed at the shared tokens.
   ========================================================================== */

/* ── page body (the title band, .phero.phero--title, is in common.css) ─────────────────────────────────────────────── */
.acct-page__body{padding:56px 0 var(--pad-lg);background:var(--tint)}

/* ── logged in: FluentCart's customer dashboard ───────────────────────────── */
/* its colour variables, pointed at the shared tokens */
.acct-page{
  --fct-primary-text-color:var(--text);
  --fct-secondary-text-color:var(--text-2);
  --fct-border-color:var(--line);
  --fct-active-border-color:var(--accent);
  --fct-primary-bg-color:var(--accent);
  --fct-primary-active-text-color:var(--accent);
  --fct-card-bg-color:var(--white);
  --fct-input-bg-color:var(--white);
  --fct-input-text-color:var(--text);
  --fct-input-placeholder-text-color:var(--text-3);
  --fct-btn-bg-color:var(--accent);
  --fct-btn-hover-bg-color:var(--accent-hover);
  --fct-btn-text-color:#fff;
  --fct-btn-hover-text-color:#fff;
  --fct-btn-border-color:var(--accent);
  --fct-customer-dashboard-text-color:var(--text);
  --fct-customer-dashboard-primary-text-color:var(--text);
  --fct-customer-dashboard-title-color:var(--text);
  --fct-customer-dashboard-sub-title-color:var(--text);
  --fct-customer-dashboard-secondary-text-color:var(--text-2);
  --fct-customer-dashboard-label-text-color:var(--text-2);
  --fct-customer-dashboard-meta-text-color:var(--text-2);
  --fct-customer-dashboard-caption-text-color:var(--text-3);
  --fct-customer-dashboard-hint-text-color:var(--text-3);
  --fct-customer-dashboard-faint-text-color:var(--text-3);
  --fct-customer-dashboard-note-text-color:var(--text-2);
  --fct-customer-dashboard-border-color:var(--line);
  --fct-customer-dashboard-rule-color:var(--line);
  --fct-customer-dashboard-card-bg:var(--white);
  --fct-customer-dashboard-surface-alt:var(--tint);
  --fct-customer-dashboard-surface-muted:var(--tint);
  --fct-customer-dashboard-surface-neutral:var(--paper);
  --fct-customer-dashboard-info-panel-bg:var(--accent-soft);
  --fct-customer-dashboard-hover-bg:var(--tint);
  --fct-customer-dashboard-soft-hover-bg:var(--tint);
  --fct-customer-dashboard-hover-strong-bg:var(--accent-soft);
  --fct-customer-dashboard-chip-bg:var(--accent-soft);
  --fct-customer-dashboard-code-bg:var(--accent-soft);
  --fct-customer-dashboard-nav-text-color:var(--text-2);
  --fct-customer-dashboard-nav-active-text-color:var(--accent);
  --fct-customer-dashboard-nav-active-bg-color:var(--accent-soft);
  --fct-customer-dashboard-nav-active-bar-color:var(--accent);
  --fct-customer-dashboard-link-color:var(--accent);
  --fct-customer-dashboard-link-hover-color:var(--accent-hover);
  --fct-customer-dashboard-blue-link-color:var(--accent);
  --fct-customer-dashboard-info-link-color:var(--accent);
  --fct-customer-dashboard-btn-bg-color:var(--accent);
  --fct-customer-dashboard-btn-hover-bg-color:var(--accent-hover);
  --fct-customer-dashboard-btn-text-color:#fff;
  --fct-customer-dashboard-btn-hover-text-color:#fff;
  --fct-customer-dashboard-secondary-btn-bg:var(--white);
  --fct-customer-dashboard-secondary-btn-text:var(--text);
  --fct-customer-dashboard-input-bg:var(--white);
  --fct-customer-dashboard-input-text:var(--text);
  --fct-customer-dashboard-el-input-text:var(--text);
  --fct-customer-dashboard-input-placeholder:var(--text-3);
  --fct-customer-dashboard-paginator-items-active-bg:var(--accent);
  --fct-customer-dashboard-paginator-items-active-color:#fff;
  --fct-customer-dashboard-paginator-text-color:var(--text-2);
  --fct-customer-dashboard-check-bg:var(--accent);
  --fct-customer-dashboard-logout-btn-bg-color:var(--tint);
  --fct-customer-dashboard-logout-btn-hover-bg-color:var(--accent-soft);
  --fct-customer-dashboard-logout-btn-text-color:var(--text);
}
.acct-page .fct_customer_profile_wrap,.acct-page .fct-customer-root-container{max-width:none;margin:0;padding:0;font-family:var(--font)}
.acct-page .fct-customer-dashboard-app-container{min-height:560px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;font-family:var(--font)}
.acct-page .fct-customer-dashboard-app-container :is(h1,h2,h3,h4,button,input,select,textarea){font-family:var(--font)}
.acct-page .fct-customer-dashboard-navs-wrap{border-right:1px solid var(--line);background:var(--white)}

/* small screens: FluentCart folds the menu behind a toggle; give it and the content room */
@media (max-width:767px){
  .acct-page__body{padding:28px 0 var(--pad)}
  .acct-page .fct-customer-dashboard-app-container{min-height:0}
  .acct-page .fct-customer-dashboard-navs-wrap{padding:14px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .acct-page .fct-customer-dashboard-main-content{min-height:240px;padding:20px 16px 28px}  /* FluentCart sets 600px */
}

/* ── Receipt: FluentCart's order receipt, as a centred document ──────────── */
/* the status banner keeps FluentCart's colours (green paid, amber pending); shape, type and buttons follow the site */
.store-page{--fluent-cart-primary-color:var(--accent)}
.store-page .fct-thank-you-page{font-family:var(--font);color:var(--text)}
.store-page .fct-thank-you-page-inner{padding:0}
.store-page .fct-thank-you-page-content{max-width:760px}
.store-page .fct-thank-you-page-header{margin-bottom:16px;padding:36px 32px;border-radius:var(--radius-lg)}
.store-page .fct-thank-you-page-header-icon{width:64px;height:64px;margin-bottom:14px}
.store-page .fct-thank-you-page-header-icon svg{width:32px;height:32px}
.store-page .fct-thank-you-page-header-title{font-family:var(--font);font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-heading);letter-spacing:var(--ls-h2)}
.store-page .fct-thank-you-page-body{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.store-page .fct-thank-you-page-body-inner{padding:32px}
.store-page .fct-thank-you-page-body :is(h1,h2,h3,h4){font-family:var(--font);color:var(--text)}
.store-page .fct-thank-you-page-body a{color:var(--accent);font-weight:500}
.store-page .fct-thank-you-page-body a:hover{color:var(--accent-hover)}
.store-page .fct-thank-you-page-order-items-header{background:var(--tint);border-radius:var(--radius)}
.store-page .fct-thank-you-page-order-items-header-row{color:var(--text-2);letter-spacing:.04em}
.store-page .fct-thank-you-page-order-items-list-variant-title{color:var(--text-2)}
.store-page .fct-meta-line-label{color:var(--text-2)}
.store-page .fct-thank-you-page-order-items-total-total :is(.fct-meta-line-label,.fct-meta-line-value){color:var(--text);font-weight:600}
.store-page .fct-thank-you-page-footer{gap:12px;margin-top:20px}
.store-page .fct-thank-you-page-view-order-button{padding:14px 24px;border-radius:var(--radius);background:var(--accent);color:#fff;font-family:var(--font);font-size:16px;font-weight:500;text-decoration:none;transition:background var(--t-ui)}
.store-page .fct-thank-you-page-view-order-button:hover{background:var(--accent-hover);color:#fff}
.store-page .fct-thank-you-page-download-receipt-button{padding:13px 22px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--white);color:var(--text);font-family:var(--font);font-size:15px;font-weight:500;text-decoration:none;transition:border-color var(--t-ui),color var(--t-ui)}
.store-page .fct-thank-you-page-download-receipt-button:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:767px){
  .store-page .fct-thank-you-page-header{padding:28px 20px}
  .store-page .fct-thank-you-page-body-inner{padding:20px}
  .store-page .fct-thank-you-page-footer{flex-direction:column;align-items:stretch}
}

/* ── logged out: the login card (inc/account.php) ───────────────────────── */
.acct{max-width:460px;display:grid;gap:20px;padding:36px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.acct{margin-inline:auto}
.acct__lead{font-size:16px;line-height:1.6;color:var(--text-2)}
.acct__error{padding:12px 16px;border-radius:var(--radius);background:#FDECEC;color:#B4262B;font-size:14px;line-height:1.5}
.acct form{display:grid;gap:18px}
.acct form p{margin:0}
.acct .login-username,.acct .login-password,.acct .signup-field{display:grid;gap:8px}
.acct label{font-size:15px;font-weight:500;line-height:1.4;color:var(--text)}
.acct .input{width:100%;height:50px;padding:0 16px;font-family:var(--font);font-size:16px;color:var(--text);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--radius);transition:border-color var(--t-ui),box-shadow var(--t-ui)}
.acct .input:hover{border-color:var(--text-3)}
.acct .input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.acct .login-remember label{display:inline-flex;align-items:center;gap:10px;font-weight:400;color:var(--text-2);cursor:pointer}
.acct .login-remember input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.acct .button{width:100%;padding:16px 24px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:#fff;
  font-family:var(--font);font-size:16px;font-weight:500;cursor:pointer;transition:background var(--t-ui),border-color var(--t-ui)}
.acct .button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.acct .button:focus-visible{outline:none;box-shadow:var(--ring)}
.acct__links{font-size:15px}
.acct__links a,.acct__note a{font-weight:500;text-decoration:none}
.acct__links a:hover,.acct__note a:hover{text-decoration:underline}
.acct__note{padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--text-2)}
.acct__heading{font-size:24px;line-height:1.3;letter-spacing:-.02em}
.acct__success{padding:12px 16px;border-radius:var(--radius);background:var(--tint);font-size:15px;line-height:1.6}
@media (max-width:560px){ .acct{padding:24px 20px} }