/* 會員／登入表單共用（Phase 18 — 與 profile.html 區塊寬度一致） */
body.business main.auth-shell,
.auth-shell {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 20px 60px !important;
  box-sizing: border-box;
}

body.business main.auth-shell > section,
.auth-card,
.auth-profile-section,
.profile-shell.auth-card,
.login-container.auth-card {
  max-width: 700px !important;
  width: 100% !important;
  margin: 32px auto 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 32px 24px 36px;
  background: var(--inftdes-surface, #faf5f2);
  border: 1px solid var(--inftdes-border, #eeeded);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow-card, 0 2px 16px rgba(0, 0, 0, 0.08));
  color: var(--inftdes-foreground, #1a1a1a);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.auth-form label {
  font-weight: 600;
  margin-top: 0.5rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"],
.auth-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--inftdes-border, #eeeded);
  background: #fff;
  color: var(--inftdes-foreground, #1a1a1a);
  margin-bottom: 0.5rem;
}

.auth-form button[type="submit"],
.auth-btn-primary {
  margin-top: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--inftdes-accent, #d97706);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 8px);
  font-weight: 600;
  cursor: pointer;
}

.auth-form button[type="submit"]:hover,
.auth-btn-primary:hover {
  background: var(--inftdes-accent-hover, #b45309);
}

.auth-btn-success {
  background: #198754;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 0.65rem 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

.auth-btn-outline {
  background: transparent;
  border: 1px solid var(--inftdes-border, #ced4da);
  color: var(--inftdes-foreground, #333);
  border-radius: var(--radius-sm, 8px);
  padding: 0.65rem 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

.auth-msg {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  min-height: 2.75rem;
  box-sizing: border-box;
}

#login-msg:empty,
#register-msg:empty,
#edit-profile-msg:empty {
  visibility: hidden;
}

.auth-msg.is-info {
  color: var(--inftdes-accent, #d97706);
}

.auth-msg.is-error {
  background: #f8d7da;
  color: #842029;
}

.auth-msg.is-success {
  background: #d1e7dd;
  color: #0f5132;
}

.login-forgot-link {
  text-align: center;
  margin: 0.75rem 0 0;
}

.login-forgot-link a {
  color: var(--inftdes-accent, #d97706);
  text-decoration: none;
  font-weight: 600;
}

.login-forgot-link a:hover {
  text-decoration: underline;
}

.google-login-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--inftdes-border, #eeeded);
  text-align: center;
}

.auth-secondary-link {
  text-align: center;
  margin-top: 1rem;
}

.auth-secondary-link a {
  color: var(--inftdes-accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-secondary-link a:hover {
  text-decoration: underline;
}

.auth-hint {
  text-align: center;
  margin: 8px 0 0;
  font-size: 0.85em;
  color: #6c757d;
  line-height: 1.45;
}

body.dark-mode .auth-hint {
  color: #b8bcc4;
}

#login-verify-panel {
  border-top: 1px solid var(--inftdes-border, #e0e0e0);
}

body.dark-mode #login-verify-panel {
  border-top-color: var(--inftdes-border, #444a55);
}

@media (max-width: 600px) {
  .auth-card,
  .auth-profile-section,
  section.auth-profile-section {
    padding: 12px 4vw 18px 4vw;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    margin-top: 0;
  }

  .auth-form input[type="text"],
  .auth-form input[type="email"],
  .auth-form input[type="tel"],
  .auth-form input[type="password"],
  .auth-form select {
    padding: 8px 8px;
  }
}

body.dark-mode .auth-card,
body.dark-mode .auth-profile-section,
body.dark-mode section.auth-profile-section {
  background: var(--inftdes-surface, #23272f);
  color: var(--inftdes-foreground, #eee);
  border-color: var(--inftdes-border, #444a55);
}

body.dark-mode .auth-form label {
  color: #e0e0e0;
}

body.dark-mode .auth-form input[type="text"],
body.dark-mode .auth-form input[type="email"],
body.dark-mode .auth-form input[type="tel"],
body.dark-mode .auth-form input[type="password"],
body.dark-mode .auth-form select {
  background: var(--inftdes-surface, #2d323c);
  border-color: var(--inftdes-border, #444a55);
  color: var(--inftdes-foreground, #eee);
}

/* Member pages — load after Bootstrap + style.css */
body.business.profile-page main,
body.business.edit-profile-page main,
body.business.login-page main.auth-shell,
body.business.register-page main.auth-shell,
body.business.forgot-password-page main.auth-shell,
body.business.reset-password-page main.auth-shell {
  max-width: 1100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px 60px !important;
  box-sizing: border-box !important;
}

body.business main > section.profile-shell,
body.business main > section.auth-profile-section,
body.business main.auth-shell > section,
body.business main.auth-shell .login-container.auth-card,
body.business main.auth-shell .auth-card,
body.business main > section.profile-shell.auth-card {
  max-width: 700px !important;
  width: min(700px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 32px 24px 36px !important;
  background: var(--inftdes-surface, #faf5f2) !important;
  border: 1px solid var(--inftdes-border, #eeeded) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
}

body.dark-mode.business main.auth-shell .auth-card,
body.dark-mode.business main > section.profile-shell.auth-card {
  background: var(--inftdes-surface, #23272f) !important;
  border-color: var(--inftdes-border, #444a55) !important;
}

body.business.profile-page .profile-info,
body.business.profile-page .profile-actions {
  max-width: 100%;
}

body.business.profile-page .profile-field .profile-value,
body.business.edit-profile-page .auth-form input,
body.business.login-page:not(.dark-mode) .login-container.auth-card .login-forgot-link a {
  color: #fff !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

body.business.login-page:not(.dark-mode) .login-container.auth-card .login-forgot-link a:hover {
  color: #fde68a !important;
}

body.business.login-page .auth-form input,
body.business.forgot-password-page .auth-form input,
body.business.reset-password-page .auth-form input {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 忘記／重設密碼 — Light mode 表單字色對比 */
body.business.forgot-password-page .auth-card,
body.business.reset-password-page .auth-card {
  color: var(--inftdes-foreground, #1a1a1a) !important;
}

body.business.forgot-password-page .auth-form label,
body.business.reset-password-page .auth-form label {
  color: #1a1a1a !important;
}

body.business.forgot-password-page .auth-form input[type="text"],
body.business.forgot-password-page .auth-form input[type="email"],
body.business.forgot-password-page .auth-form input[type="password"],
body.business.reset-password-page .auth-form input[type="text"],
body.business.reset-password-page .auth-form input[type="password"] {
  color: #1a1a1a !important;
  background: #fff !important;
  border-color: #d1d5db !important;
}

body.business.forgot-password-page .auth-form input::placeholder,
body.business.reset-password-page .auth-form input::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}

body.business.forgot-password-page .auth-secondary-link a,
body.business.reset-password-page .auth-secondary-link a {
  color: var(--inftdes-accent, #d97706) !important;
}

/* 忘記密碼頁 light mode：表單字色勿繼承橫幅白字 */
body.business.forgot-password-page:not(.dark-mode) main.auth-shell section.auth-card,
body.business.forgot-password-page:not(.dark-mode) main.auth-shell section.auth-card label,
body.business.forgot-password-page:not(.dark-mode) main.auth-shell section.auth-card input,
body.business.reset-password-page:not(.dark-mode) main.auth-shell section.auth-card,
body.business.reset-password-page:not(.dark-mode) main.auth-shell section.auth-card label,
body.business.reset-password-page:not(.dark-mode) main.auth-shell section.auth-card input {
  color: #1a1a1a !important;
}

/* .auth-card 的 color!important 會繼承到按鈕，令白字規則失效 */
body.business.forgot-password-page .auth-form button[type="submit"],
body.business.reset-password-page .auth-form button[type="submit"] {
  background: var(--inftdes-accent, #d97706) !important;
  border: 2px solid var(--inftdes-accent, #d97706) !important;
  color: #fff !important;
  text-shadow: none;
}

body.business.forgot-password-page .auth-form button[type="submit"]:hover,
body.business.reset-password-page .auth-form button[type="submit"]:hover {
  background: var(--inftdes-accent-hover, #b45309) !important;
  border-color: var(--inftdes-accent-hover, #b45309) !important;
  color: #fff !important;
}

body.business.forgot-password-page #fp-msg:not(:empty),
body.business.reset-password-page #rp-msg:not(:empty) {
  visibility: visible;
}

#fp-msg:empty,
#rp-msg:empty {
  visibility: hidden;
}

body.dark-mode.business.forgot-password-page .auth-form label,
body.dark-mode.business.reset-password-page .auth-form label {
  color: #e8eaed !important;
}

body.dark-mode.business.forgot-password-page .auth-form input,
body.dark-mode.business.reset-password-page .auth-form input {
  color: #f3f4f6 !important;
  background: var(--inftdes-surface, #2d323c) !important;
  border-color: var(--inftdes-border, #444a55) !important;
}

body.business main > .page-banner {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}