/* Scoped styles for social sign-in and account settings. */
.main:has(.auth-panel, .account-page) { padding-top: 24px; }
.social-sign-in {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 24px 0;
}
.social-sign-in .social-login-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid #c8cdd3;
  border-radius: 8px;
  background: #fff;
  color: #272b30;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  text-transform: none;
  white-space: normal;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.social-login-link::after { content: ""; }
.social-login-link > svg { width: 20px; height: 20px; justify-self: center; }
.social-login-link > i { font-size: 24px; text-align: center; }
.social-sign-in .social-login-link:hover { background: #f7f8fa; border-color: #929ba5; }
.social-sign-in .social-login-apple { background: #17191c; border-color: #17191c; color: #fff; }
.social-sign-in .social-login-apple:hover { background: #30343a; border-color: #30343a; }
.social-login-link:focus-visible,
.account-page .btn:focus-visible { outline: 3px solid #3267a8; outline-offset: 3px; }

.auth-panel { width: 100%; max-width: 420px; margin: 12px auto 36px; }
.auth-panel h1 { margin: 0 0 24px; color: #292e35; font-size: 32px; font-weight: 500; line-height: 1.25; }
.auth-panel .social-sign-in { padding-bottom: 24px; border-bottom: 1px solid #e6e8eb; }
.auth-panel .form-group { margin: 20px 0 24px; padding: 0; }
.auth-panel .form-group label { position: static; display: block; margin: 0 0 8px; color: #4c5560; font-size: 14px; font-weight: 400; line-height: 20px; }
.auth-panel .form-group.label-floating label.control-label { position: static; margin: 0 0 8px; color: #4c5560; font-size: 14px; line-height: 20px; transform: none; }
.auth-panel .form-group.label-floating .form-control { margin-top: 0; }
.auth-panel .form-control,
.account-page .form-control {
  height: 46px;
  padding: 10px 12px;
  border: 1px solid #c8cdd3;
  border-radius: 7px;
  background: #fff;
  color: #292e35;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
}
.auth-panel .form-control:focus,
.account-page .form-control:focus { border-color: #b75a20; box-shadow: 0 0 0 3px #fbeddf; background-image: none; }
.auth-panel .form-group .form-control,
.auth-panel .form-group.has-warning.is-focused .form-control { background-color: #fff; background-image: none; }
.auth-panel .btn[type="submit"] { width: 100%; min-height: 46px; margin: 4px 0 16px; padding: 11px 16px; border-radius: 7px; background: #b95110; color: #fff; box-shadow: none; font-size: 15px; font-weight: 500; text-transform: none; }
.auth-panel .btn[type="submit"]:hover { background: #9c420a; }
.auth-panel p, .auth-panel .checkbox label { font-size: 14px; line-height: 1.6; }
.auth-panel .checkbox label { color: #4c5560; }
.auth-panel .checkbox .checkbox-material::before { display: none; }
.auth-panel .errorlist { padding-left: 20px; color: #a52834; font-size: 14px; }

.account-page { width: 100%; max-width: 860px; margin: 28px auto 48px; padding: 0 24px; color: #303740; font-size: 15px; line-height: 1.6; }
.account-page > h2 { margin: 0 0 30px; font-size: 30px; font-weight: 500; line-height: 1.3; color: #292e35; }
.account-page h3 { margin: 0 0 8px; font-size: 21px; font-weight: 500; line-height: 1.4; }
.account-page h4 { margin: 0 0 5px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.account-page p { font-size: inherit; line-height: inherit; }
.account-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin: 0; padding: 10px 16px; border: 1px solid #cbd2d9; border-radius: 7px; background: #fff; color: #374151; box-shadow: none; font-size: 14px; font-weight: 500; line-height: 20px; text-transform: none; white-space: normal; }
.account-page .btn:hover, .account-page .btn:focus { background: #f4f6f8; box-shadow: none; }
.account-page .btn-primary { background: #fff7f0; border-color: #e7ccb8; color: #93400d; }
.account-page .btn-primary:hover, .account-page .btn-primary:focus { background: #ffeddf; }
.account-page .signin-disconnect, .account-page .btn-danger { border-color: #dfbfc3; color: #a52834; }
.account-page .signin-disconnect:hover, .account-page .btn-danger:hover { background: #fff1f2; }
.account-page .alert, .auth-panel .alert { padding: 14px 16px; border: 1px solid #d7e2ef; border-radius: 8px; background: #f3f7fc; color: #435973; font-size: 14px; line-height: 1.6; }
.account-page .alert-success { background: #f0f8f2; border-color: #cee5d3; color: #28633a; }
.account-page .alert-warning, .account-page .alert-error, .account-page .alert-danger, .auth-panel .alert-warning { background: #fff7f3; border-color: #eddbcd; color: #774b2b; }
.account-page .form-group { margin: 20px 0; padding: 0; }
.account-page .form-group label { margin-bottom: 8px; color: #4c5560; font-size: 14px; }
.account-page .form-text { display: block; margin-top: 8px; font-size: 13px; line-height: 1.6; }
.account-page .form-text ul { padding-left: 20px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-section { margin-top: 32px; padding-top: 28px; border-top: 1px solid #e4e7eb; }
.account-section.row { margin-left: 0; margin-right: 0; }
.account-section > .col-md-12 { padding-left: 0; padding-right: 0; }
.account-section .form { max-width: 480px; }
.account-page .account-danger { padding: 20px; border: 1px solid #ecd8da; background: #fffafa; color: #69494e; }
.account-danger h5 { margin-top: 0; color: #84363e; font-size: 16px; }
.account-danger .btn { margin-top: 8px; }
.signin-methods { margin: 0 0 28px; }
.signin-methods > p:first-of-type { margin: 0 0 20px; color: #5c6470; }
.signin-list { border: 1px solid #dde1e6; border-radius: 12px; overflow: hidden; background: #fff; }
.signin-method { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; }
.signin-method + .signin-method { border-top: 1px solid #e8ebef; }
.signin-provider { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.signin-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; background: #f4f5f7; }
.signin-icon > i { font-size: 22px; color: #343a40; }
.signin-icon > svg { width: 22px; height: 22px; }
.account-page .signin-status { display: inline-block; margin: 0; padding: 2px 8px; border-radius: 20px; background: #f0f2f5; color: #5d6672; font-size: 13px; font-weight: 500; line-height: 20px; }
.account-page .signin-connected { background: #edf7ef; color: #2b6b3d; }
.signin-connections { min-width: 0; flex: 1; }
.signin-connection { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.signin-connection + .signin-connection { border-top: 1px solid #e8ebef; margin-top: 16px; padding-top: 16px; }
.account-page .signin-email { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.signin-method > .btn, .signin-connection .btn { min-width: 148px; }
.signin-method form { margin: 0; }
.account-page .signin-help { margin: 14px 0; color: #66707b; font-size: 13px; }
.account-page .signin-locked { max-width: 330px; margin: 0; color: #5c6470; font-size: 14px; }
.signin-locked a { display: inline-block; text-decoration: underline; }

@media (max-width: 600px) {
  .auth-panel { margin-top: 0; margin-bottom: 20px; }
  .auth-panel h1 { font-size: 28px; }
  .account-page { padding: 0 16px; margin-top: 22px; }
  .account-page > h2 { margin-bottom: 24px; font-size: 28px; }
  .signin-method { flex-wrap: wrap; padding: 18px 16px; gap: 16px; }
  .signin-provider { flex-shrink: 1; min-width: 0; }
  .signin-connections { flex-basis: 100%; }
  .signin-connection { justify-content: flex-start; }
  .signin-method > .btn, .signin-connection .btn { min-width: 0; max-width: 100%; }
  .account-page .signin-locked { max-width: none; }
  .account-section { margin-top: 28px; padding-top: 24px; }
}