/* ==========================================================
   Login + Account pages — extends css/style.css
   ========================================================== */
.auth-header{ padding:36px 20px 4px; text-align:center }
.auth-card{ padding:20px 20px 40px }
.auth-card h1{ font-size:24px; margin:4px 0 0 }
.auth-sub{ color:var(--muted); font-size:13.5px; margin:8px 0 20px; line-height:1.5 }

.google-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  border:1.5px solid var(--line); background:var(--card); cursor:pointer;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:14px; color:var(--ink);
  padding:14px; border-radius:var(--r-sm);
}
.google-btn:active{ background:#FAF7F0 }
.google-g{
  width:22px; height:22px; border-radius:50%; background:#fff; display:grid; place-items:center;
  font-family:'Fraunces',serif; font-weight:700; font-size:13px;
  background:conic-gradient(from -45deg,#EA4335 0 25%,#4285F4 0 50%,#34A853 0 75%,#FBBC05 0 100%);
  color:#fff;
}

.divider{ display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--muted); font-size:12px; font-weight:700 }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line) }

.auth-err{ color:var(--coral-deep); font-size:12.5px; font-weight:700; min-height:18px; margin-top:10px }

/* Signup's allergy/ingredient acknowledgment checkbox — needs its own rule
   since .pref-row (account.html's notification toggles) is scoped under
   .notify-prefs in css/pages.css, which this page never loads; reusing
   that class name here fell through to unstyled browser defaults (oversized
   text, no gap, no clearing margin from the row above). */
.consent-row{ display:flex; align-items:flex-start; gap:10px; margin:18px 0 4px; font-size:12.5px; line-height:1.5; color:var(--ink) }
.consent-row input[type="checkbox"]{ flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--mint-deep); cursor:pointer }
.consent-row a{ color:inherit; font-weight:700 }
/* A real <a target="_blank"> isn't reliable here — some mobile browsers and
   installed-PWA shells open it in the SAME tab anyway, which would wipe
   out everything the parent just typed into this form. A button that
   opens an in-page sheet (same pattern as menu.html's dish detail sheet)
   never navigates away at all, so there's nothing to lose. */
.consent-row button.link-like{ background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; font-weight:700; text-decoration:underline; cursor:pointer }

.back-link{
  border:none; background:none; cursor:pointer; padding:0; margin-bottom:10px;
  color:var(--muted); font-family:'Plus Jakarta Sans'; font-weight:800; font-size:12.5px;
}

.auth-terms-box{
  max-height:260px; overflow-y:auto; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:14px; margin-bottom:16px; background:var(--card); font-size:13px; line-height:1.6; color:var(--ink);
}
.auth-terms-box p{ margin:0 0 10px }
.auth-terms-box p:last-child{ margin-bottom:0 }

/* ---------- Account page ---------- */
.account-wrap{ padding:26px 20px 60px }
.account-back{ color:var(--muted); text-decoration:none; font-weight:700; font-size:13px }
.profile-card{
  margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--shadow);
}
.profile-name{ font-family:'Fraunces',serif; font-weight:600; font-size:20px }
.profile-contact{ font-size:12.5px; color:var(--muted); margin-top:4px }

/* ---------- Account: email verification status (js/account.js) ----------
   Shown twice, always in sync: a compact pill right on the "Email" row
   (visible without opening anything), and again inline when the row is
   tapped open — a plain in-page expand, not a sheet/overlay, so there's no
   scrim/keyboard interaction to fight on a real phone. The confirmation
   note sits OUTSIDE the expand panel (a sibling, not nested inside it) so
   it's still visible after a successful save collapses the panel shut. */
.email-badge{
  display:inline-block; flex:none; padding:4px 11px; border-radius:999px;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:11px; white-space:nowrap;
}
.email-badge.ok{ background:#E3F6EC; color:var(--mint-deep) }
.email-badge.warn{ background:#FDE9E5; color:var(--coral-deep) }
.acct-row-expand{
  padding:16px 18px 18px; border-top:1px solid var(--line); background:#FBF9F4;
}
.profile-email-note{ font-size:12.5px; color:var(--mint-deep); margin:0; padding:0 18px 14px; line-height:1.5 }

.section-heading{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:26px 0 12px }

/* ---------- Account: settings row list (tap a row -> its own sheet or page) ---------- */
.acct-section-label{
  margin:22px 4px 8px; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.acct-section-label:first-of-type{ margin-top:24px }
.acct-row-list{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
}
.acct-row{
  display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box;
  padding:15px 18px; border:none; border-bottom:1px solid var(--line); background:none; cursor:pointer;
  text-align:left; text-decoration:none; font-family:inherit; color:inherit;
}
.acct-row:last-child{ border-bottom:none }
.acct-row-icon{ font-size:19px; flex:none; width:24px; text-align:center }
.acct-row-body{ flex:1; min-width:0; display:flex; flex-direction:column }
.acct-row-title{ font-weight:800; font-size:14px; color:var(--ink) }
.acct-row-sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.acct-row-chevron{ flex:none; color:var(--muted); font-size:16px }
.acct-row-danger .acct-row-title{ color:var(--coral-deep) }

.addr-card{
  display:flex; justify-content:space-between; gap:12px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; margin-bottom:10px;
}
.addr-card .addr-main{ min-width:0 }
.addr-card .addr-label-row{ display:flex; align-items:center; gap:8px }
.addr-card .addr-label{ font-weight:800; font-size:13.5px }
.addr-card .addr-text{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4 }
.addr-card .addr-actions{ flex:none; display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.addr-card .addr-actions button{
  border:none; background:none; cursor:pointer; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:11.5px; padding:0;
}
.addr-change{ color:var(--ink) }
.addr-set-default{ color:var(--mint-deep) }
.addr-delete{ color:var(--coral-deep) }
.addr-default-badge{
  font-size:9.5px; font-weight:800; color:var(--mint-deep); background:#E3F6EC;
  padding:2px 7px; border-radius:999px;
}

.logout-btn{
  width:100%; margin-top:26px; border:1.5px solid var(--line); background:var(--card); cursor:pointer;
  color:var(--coral-deep); font-family:'Plus Jakarta Sans'; font-weight:800; font-size:14px;
  padding:13px; border-radius:var(--r-sm);
}