/* Account and Favorites pages. */

.account-body { background: #f9fafb; }

.acct-wrap { max-width: 720px; margin: 0 auto; padding: 32px 16px 96px; }
.acct-wrap h1 { margin: 0 0 4px; font-size: clamp(26px, 5vw, 34px); letter-spacing: -0.02em; color: #101828; }
.acct-sub { margin: 0 0 26px; color: #667085; font-size: 15px; }


/* Loading / signed-out gates */
.acct-gate { padding: 72px 16px; text-align: center; color: #667085; }
.acct-gate h1 { margin-bottom: 8px; }
.acct-gate p { margin: 0 0 20px; }
.acct-spinner {
  width: 26px; height: 26px; margin: 0 auto 14px;
  border: 3px solid #e4e7ec; border-top-color: #2450e9; border-radius: 50%;
  animation: acctSpin .8s linear infinite;
}
@keyframes acctSpin { to { transform: rotate(360deg); } }

.acct-card {
  background: #fff; border: 1px solid #e4e7ec; border-radius: 14px;
  padding: 18px; margin-bottom: 16px;
}

.acct-section-label {
  margin: 26px 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #98a2b3;
}
.acct-danger-label { color: #d92d20; }

/* Identity */
.acct-identity { display: flex; align-items: center; gap: 14px; }
.acct-avatar {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: #fee4e2; color: #b42318;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
}
.acct-name { margin: 0; font-size: 18px; font-weight: 700; color: #101828; }
.acct-contact { margin: 2px 0 0; font-size: 14px; color: #667085; word-break: break-all; }

/* Referral */
.acct-referral { background: linear-gradient(180deg, #fffaf5 0%, #fff 60%); border-color: #fedf89; }
.acct-referral-head { display: flex; gap: 12px; align-items: flex-start; }
.acct-referral-head h2 { margin: 0 0 2px; font-size: 17px; color: #101828; }
.acct-referral-head p { margin: 0; font-size: 14px; line-height: 1.55; color: #667085; }
.acct-gift {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: #fef0c7; color: #b54708;
  display: flex; align-items: center; justify-content: center;
}
.acct-gift svg { width: 20px; height: 20px; }

.acct-linkrow { display: flex; gap: 8px; margin-top: 14px; }
.acct-link, .acct-input {
  flex: 1; min-width: 0; padding: 11px 13px;
  border: 1px solid #d0d5dd; border-radius: 10px; background: #fff;
  font-size: 15px; /* >=16px would be ideal on iOS but this field is read-only */
  font-family: inherit; color: #344054;
}
.acct-input { font-size: 16px; }  /* editable: 16px stops iOS zooming on focus */
.acct-link:focus, .acct-input:focus { outline: none; border-color: #2450e9; }

.acct-copy {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 11px 15px; border: 0; border-radius: 10px;
  background: #f79009; color: #fff; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.acct-copy svg { width: 15px; height: 15px; }
.acct-copy:active { background: #dc6803; }

.acct-share {
  width: 100%; margin-top: 8px; padding: 10px;
  background: none; border: 1px solid #e4e7ec; border-radius: 10px;
  color: #475467; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}

.acct-stats { display: flex; gap: 10px; margin-top: 16px; }
.acct-stats > div {
  flex: 1; padding: 12px; text-align: center;
  background: #fff; border: 1px solid #eaecf0; border-radius: 10px;
}
.acct-stats strong { display: block; font-size: 22px; color: #101828; }
.acct-stats span { font-size: 12px; color: #667085; }

/* Email nudge */
.acct-nudge { border-color: #b2ddff; background: #f5faff; }
.acct-nudge h2 { margin: 0 0 4px; font-size: 16px; color: #101828; }
.acct-nudge p { margin: 0; font-size: 14px; line-height: 1.55; color: #475467; }

/* Rows */
.acct-rows { padding: 0; }
.acct-row {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid #f2f4f7;
}
.acct-row:last-child { border-bottom: 0; }
.acct-row-main { flex: 1; min-width: 0; }
.acct-row-title { margin: 0; font-size: 15px; font-weight: 600; color: #101828; }
.acct-row-sub { margin: 2px 0 0; font-size: 13.5px; color: #667085; word-break: break-all; }
.acct-row-link { text-decoration: none; color: inherit; }
.acct-row-link:hover { background: #fcfcfd; }
.acct-chev { width: 18px; height: 18px; color: #98a2b3; flex: none; }

.acct-pill {
  flex: none; padding: 3px 9px; border-radius: 100px;
  background: #ecfdf3; color: #027a48; font-size: 12px; font-weight: 600;
}

/* Buttons */
.acct-btn {
  flex: none; padding: 9px 15px; border-radius: 9px;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; display: inline-block;
}
.acct-btn-primary { background: #2450e9; color: #fff; }
.acct-btn-primary:hover { background: #1c3fbb; }
.acct-btn-ghost { background: #fff; border-color: #d0d5dd; color: #344054; }
.acct-btn-ghost:hover { background: #f9fafb; }
.acct-btn-danger { background: #d92d20; color: #fff; }
.acct-btn-danger:hover { background: #b42318; }

.acct-danger { border-color: #fecdca; background: #fffbfa; }

.acct-signout {
  width: 100%; margin-top: 26px; padding: 12px;
  background: none; border: 1px solid #e4e7ec; border-radius: 10px;
  color: #667085; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.acct-signout:hover { background: #fff; color: #344054; }

/* Toggle */
.acct-toggle {
  flex: none; width: 44px; height: 26px; padding: 0;
  border: 0; border-radius: 100px; background: #e4e7ec;
  cursor: pointer; transition: background .18s ease; position: relative;
}
.acct-toggle span {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.2);
  transition: transform .18s cubic-bezier(.34,1.4,.64,1);
}
.acct-toggle.on { background: #f79009; }
.acct-toggle.on span { transform: translateX(18px); }

/* Toast */
.acct-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 9999; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 10px;
  background: #101828; color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 28px rgba(16,24,40,.28);
}

@media (max-width: 600px) {
  .acct-wrap { padding: 22px 14px 80px; }
  .acct-stats { flex-direction: row; }
  .acct-row { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-spinner { animation-duration: 2s; }
  .acct-toggle span { transition: none; }
}