/* =========================================================================
 * Awesomenicity — My Account design system
 *
 * One stylesheet for the whole account area (and the sign-in / register /
 * password screens), built on the register wizard's tokens so every screen
 * reads as one product instead of three colliding themes.
 *
 * Scope: everything is under .woocommerce-account (or the auth pages' own
 * wrappers) so it cannot leak into the rest of the site.
 * ===================================================================== */

:root{
  --aw-brand:#4f5bd5;
  --aw-brand-dark:#3f49b8;
  --aw-brand-soft:#eef0fb;
  --aw-ink:#1f2440;
  --aw-head:#1a1a1a;      /* headings — black, one size on every tab */
  --aw-muted:#9aa0bf;
  --aw-line:#e3e6f4;
  --aw-card:#ffffff;
  --aw-radius:16px;
  --aw-radius-sm:10px;
  --aw-shadow:0 12px 40px rgba(20,28,80,.10);
  --aw-ok:#3aa55d;
  --aw-err:#c0392b;
}

/* ---- Layout: flat nav on the left, one card on the right --------------- */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{ box-sizing:border-box; min-width:0; }

.woocommerce-account .woocommerce-MyAccount-navigation{ width:24%; float:left; }
.woocommerce-account .woocommerce-MyAccount-content{
  width:72%; float:right;
  background:var(--aw-card);
  border-radius:var(--aw-radius);
  box-shadow:var(--aw-shadow);
  padding:clamp(18px,2.2vw,24px);
  color:var(--aw-ink);
}
@media (max-width:782px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ width:100%; float:none; }
  .woocommerce-account .woocommerce-MyAccount-navigation{ margin-bottom:16px; }
}

/* Left nav: NO card of its own — the pills are the styling. A plain flex
   column with a small gap; the container adds no background, border or shadow
   (that was reading as a card-inside-a-card). */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:5px;
  background:none; box-shadow:none; border:0; border-radius:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:flex; align-items:center;
  min-height:44px; padding:8px 12px;
  text-decoration:none; color:var(--aw-ink); font-weight:600;
  font-size:15px; line-height:1.2;
  border-radius:var(--aw-radius-sm);
  border-left:3px solid transparent;
  transition:background .12s,color .12s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:var(--aw-brand-soft); color:var(--aw-brand-dark);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a{
  background:var(--aw-brand-soft); color:var(--aw-brand);
  border-left-color:var(--aw-brand);
}

/* ---- Headings: literally ONE style across the whole account ----------- */
/* The tabs were authored with mixed tags — some <h2>, some <h3>, one <h4> —
   so every tab rendered its title at a different size. Collapse them ALL to a
   single identical style: Poppins, 30px, bold, black, left-aligned. Same on
   every tab AND on the dashboard greeting, so nothing changes size or colour
   as you move around the account. No size ladder, no green. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content h4,
.woocommerce-account .aw-buy__head h2,
.woocommerce-account .aw-dashboard__hello{
  font-family:'Poppins', sans-serif;
  font-size:30px;
  font-weight:700;
  color:var(--aw-head);
  text-align:left;
  line-height:1.25;
  margin:0 0 20px;
}

/* One divider between major blocks, never two. Each block carries only a
   bottom rule; the last one drops it. */
.woocommerce-account .aw-acct-section,
.aw-change-sub,.aw-cyg,.aw-subscription-options,.aw-billing-portal{
  margin:0 0 28px; padding:0 0 28px; border-bottom:1px solid var(--aw-line);
}
.woocommerce-account .aw-acct-section:last-child,
.aw-subscription-options:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }

/* ---- Inputs / selects (wizard vocabulary) ----------------------------- */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select{
  width:100%; box-sizing:border-box;
  border:1px solid var(--aw-line); border-radius:var(--aw-radius-sm);
  padding:12px 14px; font-size:15px; color:var(--aw-ink); background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus{
  outline:none; border-color:var(--aw-brand); box-shadow:0 0 0 3px rgba(79,91,213,.12);
}
.woocommerce-account label{ color:var(--aw-ink); font-weight:600; }

/* Password screen fieldset: round it and give the legend some air. */
.woocommerce-account .woocommerce-MyAccount-content fieldset{
  border:1px solid var(--aw-line); border-radius:var(--aw-radius);
  padding:20px clamp(16px,3vw,28px); margin:0 0 24px;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend{
  padding:0 8px; font-weight:700; color:var(--aw-ink);
}

/* ---- Buttons (branded, and they must win the Elementor kit's crimson) -- */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--aw-brand) !important; color:#fff !important;
  border:none !important; border-radius:999px !important;
  padding:13px 26px !important; font-size:15px; font-weight:700;
  cursor:pointer; text-decoration:none; box-shadow:none;
  transition:background .15s;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:focus,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:focus{
  background:var(--aw-brand-dark) !important; color:#fff !important;
}
/* Quiet secondary actions (e.g. the "Cancel" next to a confirm) */
.aw-change-sub__preview .button + .button,
.woocommerce-account .woocommerce-MyAccount-content .button.aw-btn--ghost{
  background:#fff !important; color:var(--aw-brand) !important;
  box-shadow:inset 0 0 0 1px var(--aw-line) !important;
}

/* ---- Notices: our own look, no clashing theme border, no icon overlap -- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info{
  border:1px solid var(--aw-line) !important;
  border-left:4px solid var(--aw-line) !important;
  border-radius:var(--aw-radius-sm) !important;
  padding:14px 16px !important; margin:0 0 20px !important;
  background:#fff !important; color:var(--aw-ink);
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before{ content:none !important; }
.woocommerce-account .woocommerce-message{ border-left-color:var(--aw-ok) !important; }
.woocommerce-account .woocommerce-error{ border-left-color:var(--aw-err) !important; }
.woocommerce-account .woocommerce-info{ border-left-color:var(--aw-brand) !important; }

/* ---- Rounded tables (change form receipts / grade rows) --------------- */
.aw-change-sub__lines,.aw-change-sub__grades{
  width:100%; border:1px solid var(--aw-line); border-radius:var(--aw-radius-sm);
  border-collapse:separate; border-spacing:0; overflow:hidden; margin:10px 0 18px;
}
.aw-change-sub__lines td,
.aw-change-sub__grades td,.aw-change-sub__grades th{
  padding:10px 12px; border-bottom:1px solid var(--aw-line); text-align:left;
}
.aw-change-sub__lines tr:last-child td,
.aw-change-sub__grades tr:last-child td{ border-bottom:0; }
.aw-change-sub__grades thead th{ background:var(--aw-brand-soft); font-weight:700; }

/* ---- Change / confirm preview panel ----------------------------------- */
.aw-change-sub__preview{
  background:var(--aw-brand-soft);
  border-radius:var(--aw-radius);
  padding:20px clamp(16px,3vw,24px);
  margin:4px 0 24px;
}
.aw-change-sub__preview ul{ margin:0 0 14px; padding-left:18px; }

/* ---- Small helpers ---------------------------------------------------- */
.aw-change-sub__note,.aw-cyg__note,.aw-buy__hint{ color:var(--aw-muted); font-size:.92rem; }
.aw-cyg__intro,.aw-change-sub__current{ color:var(--aw-ink); }

/* ---- Buy form: inside the account it fills the pane, left-aligned, no card */
.aw-acct-section--buy .aw-buy,
.woocommerce-account .aw-buy{
  max-width:none; margin:0; background:transparent;
  box-shadow:none; border:0; padding:0;
}
/* The standalone /subscribe/ page centres the buy form; inside the account it
   must read like every other tab — top-left, not centred. */
.woocommerce-account .aw-buy__head{ text-align:left; }
.woocommerce-account .aw-buy__head p{ margin-left:0; margin-right:0; }

/* ---- "My children" list ------------------------------------------------ */
/* One row per child: name, year group, and a remove box. Built on the same
   tokens as everything else rather than shipping its own look — the per-tab
   <style> blocks were exactly what the design unification removed. */
.woocommerce-account .aw-children{ max-width:640px; margin:0; }
.woocommerce-account .aw-children__row{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  padding:14px; margin:0 0 12px;
  border:1px solid var(--aw-line); border-radius:var(--aw-radius-sm);
}
.woocommerce-account .aw-children__row--new{ background:var(--aw-brand-soft); border-style:dashed; }
.woocommerce-account .aw-children__field{ flex:1 1 200px; min-width:0; }
.woocommerce-account .aw-children__label{
  display:block; margin-bottom:6px; font-weight:600;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--aw-muted);
}
.woocommerce-account .aw-children__input{ width:100%; box-sizing:border-box; }
.woocommerce-account .aw-children__remove{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding-bottom:12px; color:var(--aw-muted); font-size:14px; font-weight:600;
}
.woocommerce-account .aw-children__remove input{ margin:0; }
.woocommerce-account .aw-children__add{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--aw-brand); font-weight:700; font-size:15px;
}
.woocommerce-account .aw-children__add:hover{ color:var(--aw-brand-dark); text-decoration:underline; }
.woocommerce-account .aw-children__note{ color:var(--aw-muted); font-size:.92rem; }
@media (max-width:560px){
  .woocommerce-account .aw-children__field{ flex:1 1 100%; }
}

/* ---- Auth password-recovery screens ----------------------------------- */
.woocommerce-ResetPassword,
.woocommerce-LostPassword form,
form.lost_reset_password{
  max-width:560px; margin:0 auto; background:var(--aw-card);
  border-radius:var(--aw-radius); box-shadow:var(--aw-shadow);
  padding:32px clamp(16px,4vw,40px);
}