/* ==========================================================================
   "Continue with Google" button — includes/google-button.php
   --------------------------------------------------------------------------
   White surface with the four-colour mark. Google's branding guidelines
   require their real logo on white or their own blue/black; a version
   recoloured to match the site is not allowed, and the mark is also what makes
   the button instantly recognisable.

   The auth pages use a dark card (.auth-card), so the button deliberately does
   not inherit from it.
   ========================================================================== */

.gbtn-wrap{margin:0 0 22px;}

.gbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  width:100%;
  padding:13px 20px;

  background:#fff;
  color:#1f1f1f;
  border:1px solid #dadce0;
  border-radius:10px;

  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;

  transition:background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gbtn:hover{
  background:#f8f9fa;
  border-color:#d2d5d9;
  box-shadow:0 1px 3px rgba(60,64,67,.2);
  color:#1f1f1f;
}
.gbtn:active{background:#f1f3f4;}
.gbtn:focus-visible{outline:2px solid #0A49A6;outline-offset:2px;}

.gbtn__icon{display:flex;flex:0 0 18px;}

/* Divider between the Google button and the email form.
   Two flex rules either side of the word, rather than one rule with the label
   sitting on a matching background. The auth card is translucent
   (rgba(255,255,255,.04) over a blur), so there is no solid colour to match —
   a painted label would read as a patch. This way the backdrop does not
   matter at all. */
.gbtn-or{
  display:flex;
  align-items:center;
  gap:14px;
  margin:18px 0 0;
}
.gbtn-or::before,
.gbtn-or::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(255,255,255,.18);
}
.gbtn-or span{
  color:rgba(255,255,255,.55);
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Light pages need the inverse. */
body:not(.auth-page) .gbtn-or::before,
body:not(.auth-page) .gbtn-or::after{background:#e7ebf0;}
body:not(.auth-page) .gbtn-or span{color:#7c8792;}

@media (max-width:520px){
  .gbtn{padding:12px 16px;font-size:14.5px;}
}

@media (prefers-reduced-motion:reduce){
  .gbtn{transition:none;}
}