/* Member portal — builds on the public site's brand tokens (css/styles.css) */

body{ background:var(--cream); min-height:100vh; }

/* ---------------- Shared header ---------------- */
.portal-header{
  background:var(--white); border-bottom:1px solid color-mix(in srgb, var(--rule) 20%, transparent);
  padding:1rem clamp(1.25rem,3vw,2.5rem); display:flex; align-items:center; justify-content:space-between;
}
.portal-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.portal-brand img{ width:38px; height:38px; border-radius:50%; }
.portal-brand span{ font-family:var(--font-display); font-weight:600; color:var(--maroon); font-size:1rem; }

.portal-main{ max-width:760px; margin:0 auto; padding:2rem clamp(1.25rem,3vw,2.5rem) 4rem; }

/* ---------------- Login ---------------- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%, var(--stage-1) 0%, var(--stage-2) 78%);
  padding:1.5rem;
}
.login-card{
  width:min(100%, 400px); background:var(--surface); border-radius:var(--radius-lg); padding:2.25rem;
  box-shadow:var(--shadow-lift); text-align:center;
}
.login-card img{ width:56px; height:56px; border-radius:50%; margin:0 auto 1rem; }
.login-card h1{ font-size:1.3rem; margin-bottom:.25rem; }
.login-card p{ color:var(--text-soft); font-size:.88rem; margin-bottom:1.5rem; }
.login-error{
  display:none; background:color-mix(in srgb, var(--maroon) 10%, transparent); color:var(--maroon);
  border-radius:var(--radius-sm); padding:.7rem .9rem; font-size:.85rem; margin-bottom:1rem; text-align:left;
}
.login-error.is-visible{ display:block; }
.login-footer-note{ margin-top:1.25rem; font-size:.82rem; color:var(--text-soft); }
.login-footer-note a{ color:var(--maroon); font-weight:600; text-decoration:none; }

/* ---------------- Dashboard cards ---------------- */
.portal-card{ background:var(--surface); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2rem); box-shadow:var(--shadow-card); margin-bottom:1.75rem; }
.portal-card h2{ font-size:1.15rem; margin-bottom:.3rem; }
.portal-card > p.hint{ color:var(--text-soft); font-size:.85rem; margin-bottom:1.25rem; }

.profile-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.profile-head h1{ font-size:1.5rem; margin:0; }
.profile-head p{ color:var(--text-soft); margin:.2rem 0 0; font-size:.9rem; }

.badge{ display:inline-flex; align-items:center; padding:.3em .75em; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.badge-paid{ background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); }
.badge-pending{ background:color-mix(in srgb, var(--gold) 20%, transparent); color:#8a5a00; }
.badge-overdue{ background:color-mix(in srgb, var(--maroon) 14%, transparent); color:var(--maroon); }
.badge-waived{ background:color-mix(in srgb, var(--teal) 14%, transparent); color:var(--teal); }
.badge-tier{ background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); }
.badge-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.membership-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem 1.5rem; margin-top:.75rem; }
.membership-item{ display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; }
.membership-item .m-label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); }
.membership-item small{ color:var(--text-soft); font-size:.8rem; }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field-grid .full{ grid-column:1 / -1; }
.portal-card .form-row label{ font-size:.82rem; font-weight:600; margin-bottom:.3rem; display:block; }
.portal-card .form-row input{
  width:100%; border:1.5px solid color-mix(in srgb, var(--rule) 35%, transparent); border-radius:var(--radius-sm);
  padding:.65em .8em; font-family:inherit; font-size:.9rem; min-height:40px; background:var(--surface); color:var(--text-strong);
}
.portal-card .form-row input:disabled{ background:var(--cream); color:var(--text-soft); }

.pill-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.pill{
  display:flex; align-items:center; gap:.4rem; background:var(--cream); border-radius:999px;
  padding:.35em .8em; font-size:.82rem;
}
.pill button{ background:none; border:none; cursor:pointer; color:var(--text-soft); display:flex; }
.pill button svg{ width:13px; height:13px; }
.add-family-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.add-family-row input, .add-family-row select{
  border:1.5px solid color-mix(in srgb, var(--rule) 35%, transparent); border-radius:var(--radius-sm);
  padding:.55em .7em; font-family:inherit; font-size:.88rem;
}
.add-family-row input{ flex:1; min-width:140px; }

.family-member-row{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.6rem .75rem; border-radius:var(--radius-sm); background:var(--cream);
  margin-bottom:.5rem; font-size:.88rem;
}
.family-member-row .fm-info{ flex-grow:1; min-width:0; }
.family-member-row .fm-name{ font-weight:600; }
.family-member-row .fm-detail{ color:var(--text-soft); font-size:.8rem; margin-top:.15rem; }
.family-member-row .fm-actions{ display:flex; gap:.5rem; flex-shrink:0; }
.family-member-row .fm-actions button{ background:none; border:none; cursor:pointer; color:var(--text-soft); display:flex; }
.family-member-row .fm-actions button svg{ width:15px; height:15px; }

.event-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1rem 0; border-bottom:1px solid color-mix(in srgb, var(--rule) 12%, transparent);
}
.event-row:last-child{ border-bottom:none; }
.event-row h3{ font-size:1rem; margin:0 0 .2rem; }
.event-row .meta{ font-size:.82rem; color:var(--text-soft); }
.event-row .actions{ display:flex; gap:.5rem; align-items:center; }
.guest-count-field{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-soft); }
.guest-count-field input{
  width:52px; border:1.5px solid color-mix(in srgb, var(--rule) 35%, transparent); border-radius:var(--radius-sm);
  padding:.4em .5em; font-family:inherit; font-size:.85rem; text-align:center;
}

.priced-event-row{ flex-direction:column; align-items:flex-start; }
.pricing-selections{ margin:.75rem 0; display:grid; gap:.5rem; }
.pricing-addons{ display:grid; gap:.5rem; margin-top:.25rem; padding-top:.5rem; border-top:1px dashed color-mix(in srgb, var(--rule) 25%, transparent); }
.pricing-choice{
  display:flex; align-items:center; gap:.5rem; font-size:.9rem; cursor:pointer;
}
.pricing-choice input[type="radio"], .pricing-choice input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; }
.addon-qty{
  width:48px; margin-left:auto; border:1.5px solid color-mix(in srgb, var(--rule) 35%, transparent); border-radius:var(--radius-sm);
  padding:.3em .4em; font-family:inherit; font-size:.85rem; text-align:center;
}
.addon-qty:disabled{ opacity:.4; }
.pricing-total{ font-size:.95rem; color:var(--text-strong); }
.pricing-total strong{ color:var(--maroon); }

.attendees-summary{ font-size:.82rem; color:var(--text-soft); margin:.3rem 0 0; }
details.attendees-summary > summary{ cursor:pointer; }
.attendees-list{ margin:.35rem 0 0; }

.empty-note{ color:var(--text-soft); font-size:.88rem; padding:1rem 0; }

.toast{
  position:fixed; bottom:1.5rem; right:1.5rem; background:var(--ink); color:#fff; padding:.85rem 1.25rem;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lift); font-size:.88rem; opacity:0; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease; z-index:1000; pointer-events:none;
}
.toast.is-visible{ opacity:1; transform:translateY(0); }
.toast.is-error{ background:var(--maroon); }

@media (max-width:600px){
  .field-grid{ grid-template-columns:1fr; }
}