/* ============================================================================================
   pages/login.css — styles for index.html (the login page) only. Loaded after css2/app.css.
   ============================================================================================ */

/* --- Header: "Language ▾" pill; on mobile the logo left and the menu button right (mockup) --- */
.login-lang-btn::part(button) {
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}

/* app.css hides the logo on phones (the app pages show the menu button there). Specificity is
   higher than app.css's mobile rules, so no !important is needed. */
@media (max-width: 767.98px) {
  wa-page .navbar.is-login .nav-brand {
    display: block;
  }
  wa-page .navbar.is-login .nav-toggle-btn {
    order: 2;
  }
  /* Language is in the drawer on phones */
  wa-page .navbar.is-login > :not(.nav-brand):not(.nav-toggle-btn) {
    display: none;
  }
}

wa-page[view='mobile'] .navbar.is-login .nav-brand {
  display: block;
}

/* --- Page layout --- */
.login-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 60px;
}

.login-form-wrap {
  width: 100%;
  max-width: 420px;
}

.login-callout {
  margin-bottom: 20px;
}

/* Message left, close button right (wa-split would wrap on narrow widths) */
.callout-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.callout-close-btn {
  flex-shrink: 0;
  margin-block: -0.4rem; /* the button is taller than the one-line message */
}

.callout-close-btn::part(button) {
  color: inherit;
}

.login-hero {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  margin-bottom: 28px;
}

.login-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.2;
}

.login-subtitle {
  font-size: var(--wa-font-size-m, 1rem);
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 28px;
}

/* --- Email / reset forms --- */
.login-form-wrap wa-input {
  width: 100%;
}

/* Failed sign-in (set by pages/login.js) */
.login-form-wrap wa-input.is-invalid {
  --wa-form-control-border-color: var(--accent-red);
}

/* Plain <wa-button> that reads as a link */
.text-link::part(button) {
  color: var(--text-primary);
  font-weight: normal;
}

.text-link::part(button):hover {
  background: none;
  text-decoration: underline;
}

.link-row {
  text-align: center;
}

/* Sign In / Send: navy pill, narrower than the fields (mockup) */
.primary-btn {
  justify-self: center;
  align-self: center;
  width: 62%;
  margin-top: 0.5rem;
}

.primary-btn::part(button) {
  width: 100%;
  justify-content: center;
  background-color: var(--text-primary);
  border-color: var(--text-primary);
  color: #ffffff;
  border-radius: 50px;
}

.primary-btn::part(button):hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

/* --- QR code (data-state on .qr-box: loading | ready | expired) --- */
.qr-box {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #ffffff;
  transition: filter 0.3s;
}

.qr-box[data-state='loading'] .qr-img,
.qr-box:not([data-state='loading']) .qr-spinner {
  display: none;
}

/* Expired: blur the code so it can't be scanned; the whole box is the refresh button */
.qr-box[data-state='expired'] .qr-img {
  filter: blur(10px);
  opacity: 0.6;
}

.qr-refresh {
  display: none;
  position: absolute;
  inset: 0;
  /* A <button> does not stretch to inset: 0 by itself */
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.qr-box[data-state='expired'] .qr-refresh {
  display: flex;
}

.qr-refresh wa-icon {
  font-size: 2rem;
  color: #ffffff;
  background: var(--text-primary);
  border-radius: 50%;
  padding: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.qr-refresh:hover wa-icon,
.qr-refresh:focus-visible wa-icon {
  transform: rotate(90deg);
}

.qr-hint {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--wa-font-size-s, 0.875rem);
  margin: 12px 0 0;
}

/* --- WeChat QR (WxLogin iframe; its content is styled by css2/wechat.min.css) --- */
.wechat-qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.wechat-qr-container iframe {
  border: none;
  height: 300px;
}

/* --- "Or sign in with" and the round sign-in buttons --- */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 20px;
  color: var(--text-secondary);
  font-size: var(--wa-font-size-xs, 0.75rem);
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
}

.social-btn::part(button) {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  min-width: unset;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--border-color);
  background: #ffffff;
  color: var(--wa-color-neutral-600);
  transition: background-color 0.218s, border-color 0.218s;
}

/* Hover and press as on Google's button (its own CSS: border rgb(210, 227, 252), a
   rgba(66, 133, 244, .08) tint over white, .1 when pressed), so the row reacts alike */
.social-btn:not([disabled])::part(button):hover {
  border-color: rgb(210, 227, 252);
  background-color: rgb(240, 245, 254);
}

.social-btn:not([disabled])::part(button):active {
  border-color: rgb(210, 227, 252);
  background-color: rgb(236, 243, 254);
}

.social-btn wa-icon {
  font-size: 1.4rem;
  margin-inline: 0;
}

/* Google renders its own 40px round button (iframe) into this slot; scale it to the row size */
.social-slot {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-slot > div:not(:has(wa-button)) {
  transform: scale(1.3);
}

/* Google's button is built for browser defaults; two Web Awesome resets break it:
   - native.css's max-width: 100% cut off the iframe, which is wider than the button
     (64px with negative margins);
   - box-sizing: border-box. When Google refuses the iframe (e.g. a browser that sends
     no referrer gets "origin not allowed"), Google draws the button in the page
     instead. Its icon box is 20px with 10px padding, so border-box left no room for
     the "G" svg. Here the icon box has no padding and is centred, and the svg gets
     the 18px of Google's normal button. That button still works, so it must stay
     visible. */
#google-slot iframe {
  max-width: none;
}

/* The id outweighs Google's three-class selector */
#google-slot div:has(> svg) {
  padding: 0;
  margin: auto;
}

#google-slot svg {
  max-width: none;
  width: 18px;
  height: 18px;
}

/* Icon sizes as in the mockup (plan/login_icons.png), relative to the 52px circle:
   Apple 47% high, WeChat 47% wide, QR code 40%. Facebook uses the round logo at 46%
   (a circle looks lighter than the mockup's 50% square). Font Awesome glyphs
   differ in shape, so each icon has its own size. Google draws its own "G" (45%). */
#btn-apple wa-icon { font-size: 1.7rem; }
#btn-facebook wa-icon { font-size: 1.5rem; }
#btn-switch wa-icon[name='qrcode'] { font-size: 1.5rem; }

/* Brand colors */
#btn-apple::part(button) { color: #000000; }
#btn-wechat::part(button) { color: #07c160; }
#btn-facebook::part(button) { color: #1877f2; }
#btn-switch::part(button) { color: var(--text-primary); }
#google-slot wa-icon { color: #4285f4; }

@media (min-width: 640px) {
  .login-main {
    padding: 48px 40px 80px;
  }

  .login-hero {
    max-height: 300px;
    margin-bottom: 32px;
  }

  .login-title {
    font-size: 2.25rem;
    margin-bottom: 12px;
  }

  .login-subtitle {
    margin-bottom: 32px;
  }
}