html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Bundle CTA - subtle hover so users know the bundle row is clickable */
.bundle-cta {
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s;
}
.bundle-cta:hover {
    background-color: rgba(79, 123, 255, 0.05);
    border-color: rgba(79, 123, 255, 0.25);
}

/* Google Sign-In button — matches Google's brand guidelines.
   The default Identity UI renders external providers as:
     <button type="submit" class="btn btn-primary" name="provider" value="Google">Google</button>
   We override Bootstrap chrome on that one element and swap the text for
   "Sign in with Google" via a pseudo-element, so the scaffolded Razor markup
   stays untouched. Background-image is the official multi-color G logo as
   an inline SVG data URI (no extra HTTP request, no Identity UI override). */
button[name="provider"][value="Google"] {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Cpath fill='%234285F4' d='M17.64 9.2045c0-.6381-.0573-1.2518-.1636-1.8409H9v3.4818h4.8436c-.2086 1.125-.8427 2.0782-1.7959 2.7164v2.2581h2.9087c1.7018-1.5668 2.6836-3.874 2.6836-6.6154z'/%3E%3Cpath fill='%2334A853' d='M9 18c2.43 0 4.4673-.806 5.9564-2.1805l-2.9087-2.2581c-.806.54-1.8368.8595-3.0477.8595-2.344 0-4.3282-1.5831-5.0364-3.7104H.9573v2.3318C2.4382 15.9831 5.4818 18 9 18z'/%3E%3Cpath fill='%23FBBC05' d='M3.9636 10.71c-.18-.54-.2823-1.1168-.2823-1.71s.1023-1.17.2823-1.71V4.9582H.9573A8.9965 8.9965 0 000 9c0 1.4523.3477 2.8268.9573 4.0418L3.9636 10.71z'/%3E%3Cpath fill='%23EA4335' d='M9 3.5795c1.3214 0 2.5077.4541 3.4405 1.346l2.5813-2.5814C13.4632.8918 11.426 0 9 0 5.4818 0 2.4382 2.0168.9573 4.9582L3.9636 7.29C4.6718 5.1627 6.656 3.5795 9 3.5795z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px 18px;
    border: 1px solid #747775 !important;
    border-radius: 4px !important;
    height: 40px;
    padding: 0 14px 0 40px !important;
    min-width: 220px;
    cursor: pointer;
    font-size: 0 !important; /* hide the inner 'Google' text; pseudo-element re-introduces text */
    line-height: 38px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
button[name="provider"][value="Google"]::after {
    content: 'Sign in with Google';
    color: #1f1f1f !important;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    letter-spacing: 0.25px;
}
button[name="provider"][value="Google"]:hover {
    background-color: #f8f9fa !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}
button[name="provider"][value="Google"]:focus,
button[name="provider"][value="Google"]:focus-visible {
    box-shadow: 0 0 0 2px #4285F4 !important;
    outline: none !important;
}