/* "Continue with Google" button + "or" divider.
   Used in two places: the login modal in header.php, and the standalone
   signin.php page. Base rules are unscoped so both can use them; the only
   scoped rules are the per-container widths at the bottom. */

/* "or" divider: a rule either side of the word */
.google-login-divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 18px 0 14px 0;
  color: #888;
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.google-login-divider::before,
.google-login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e0e0e0;
}

.google-login-divider span {
  padding: 0 12px;
}

/* The button itself.
   An <a> on purpose: css/login.css styles `form button` blue and full width,
   and this must not inherit that. Official Google light theme — white surface,
   #dadce0 border, #3c4043 label, Roboto with the site's Lato as fallback. */
.btn-google-login {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;      /* same height as the blue Submit button */
  padding: 0 14px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  color: #3c4043;
  font-family: "Roboto", "Lato", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

.btn-google-login:hover {
  background: #f7f8f8;
  border-color: #d2d5d9;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  color: #3c4043;
  text-decoration: none;
}

.btn-google-login:focus-visible {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}

.btn-google-login:active {
  background: #eef0f1;
}

.btn-google-login svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

/* Label can shrink and ellipsise rather than push the button wider. */
.btn-google-login span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- per-container widths ------------------------------------------------ */

/* inside the modal, match the 90% column the greeting and OTP form use */
.sign-in-modal .wrap--content-sign-in .google-login-block {
  width: 90%;
  margin: 0 auto;
}

/* on signin.php the card already has its own padding */
.signin-card .google-login-block {
  width: 100%;
}

/* Matches the existing modal breakpoint in css/login.css.
   At 320px the modal is 90% wide with 30px padding on .content-sign-in, which
   leaves roughly 228px of usable width — the button still has to fit inside
   it without overflowing, and stay a comfortable tap target. */
@media (min-width: 320px) and (max-width: 600px) {
  .btn-google-login {
    min-height: 48px;
    padding: 0 10px;
    font-size: 14px;
  }

  .btn-google-login svg {
    margin-right: 10px;
  }

  .google-login-divider {
    margin: 14px 0 12px 0;
    font-size: 12px;
  }
}