/* Main styles */

:root {
  --color-main: #141618;
  --color-lighter: #606981;
  --color-border: #dce0e4;
  --color-border-critical: #D41433;
  --color-alert: #d23031;
  --color-link: #104FC6;
  --color-button-primary: #104FC6;
  --color-button-secondary: #FEFFFF;
  --color-background: rgba(255, 255, 255, 0.95);
  --color-background-alert: #fff0f0;
  --size-header: 32px;
  --size-text-input: 14px;
  --size-text: 14px;
  --size-text-small: 12px;
  --size-line-height-large: 40px;
  --size-line-height-medium: 20px;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--color-main);
}

h1 {
  text-align: center;
  margin: 0;
  font-weight: 700;
  font-size: var(--size-header);
  line-height: var(--size-line-height-large);
}

a {
  font-weight: 500;
  font-size: var(--size-text);
  line-height: var(--size-line-height-medium);
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #0d6efd;
}

p {
  margin: 0;
  font-weight: 400;
  font-size: var(--size-text);
  line-height: var(--size-line-height-medium);
  color: var(--color-lighter);
  text-decoration: none;
  text-align: center;
}

form {
  margin: 0;
}

.centered {
  text-align: center;
}

/* Container styling */

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.wrapper>* {
  margin-top: auto;
}

.form-primary {
  display: grid;
  gap: 32px;
}

.form-secondary-buttons {
  display: grid;
  gap: 12px;
}

.form-container {
  width: 385px;
  background-color: var(--color-background);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  display: grid;
  gap: 24px;
}

.content-container {
  margin: 0 auto;
  max-width: 480px;
  padding: 20px;
  background-color: var(--color-background);
  backdrop-filter: blur(8px);
  border-radius: 8px;
}

.content-container img {
  max-width: 100%;
}

.content-container p {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.page-footer {
  margin-bottom: 20px;
}

/* Divider styling */

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #66728A;
  font-weight: 500;
  font-size: 14px;
}

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

.divider::before {
  margin-right: 8px;
}

.divider::after {
  margin-left: 8px;
}

/* Form styling */

.form-control {
  height: 36px;
  font-weight: normal;
  font-size: var(--size-text-input);
  line-height: var(--size-line-height-medium);
}

.form-container-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 8px;
}

.form-container-header a {
  margin-bottom: 12px;
  display: block;
  letter-spacing: 0.04em;
}

.form-group {
  position: relative;
}

.form-group>div {
  display: flex;
  justify-content: space-between;
}

.form-group>div a {
  font-weight: normal;
  font-size: var(--size-text);
  line-height: var(--size-line-height-medium);
  text-align: right;
}

.form-group label {
  font-weight: 500;
  line-height: var(--size-line-height-medium);
  letter-spacing: 0.04em;
}

.form-group label:not(:last-child) {
  font-size: var(--size-text);
  margin-bottom: 4px;
}

.form-container-footer {
  text-align: center;
  font-size: var(--size-text);
  font-weight: normal;
  line-height: var(--size-line-height-medium);
  color: var(--color-lighter);
}

.form-container-footer a {
  font-weight: normal;
}

.form-container-footer p {
  display: inline-flex;
  gap: 8px;
}

.form-input-error {
  border: 1px solid var(--color-border-critical);
}

.form-input-error-label {
  margin-top: 4px;
  margin-bottom: 0;
  position: relative;
  color: var(--color-alert);
  font-size: var(--size-text-small);
  line-height: var(--size-line-height-medium);
}

.field-wrapper .form-input-error-label:empty {
  visibility: hidden;
}

.field-wrapper .form-input-error-label:not(:empty) {
  visibility: visible;
}

/* Alert */

.alert {
  margin: 0;
  padding: 0.875rem
}

.alert.alert-danger {
  background-color: var(--color-background-alert);
  border: 1px solid #FF555E4D;
  font-weight: normal;
  font-size: var(--size-text-input);
  line-height: var(--size-line-height-medium);
  color: #C00022;
}

.alert.alert-danger> :first-child {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 9.5C17 13.0899 14.0899 16 10.5 16C6.91015 16 4 13.0899 4 9.5C4 5.91015 6.91015 3 10.5 3C14.0899 3 17 5.91015 17 9.5ZM18 9.5C18 13.6421 14.6421 17 10.5 17C6.35786 17 3 13.6421 3 9.5C3 5.35786 6.35786 2 10.5 2C14.6421 2 18 5.35786 18 9.5ZM10.5 5C11.1 5 11.5 5.4 11.5 6C11.5 6.6 11.1 7 10.5 7C9.9 7 9.5 6.6 9.5 6C9.5 5.4 9.9 5 10.5 5ZM11 8V14H10V8H11Z' fill='%23D23031'/%3E%3C/svg%3E%0A");
  width: 17px;
  height: 20px;
  margin: auto 3px;
  padding-top: 3px;
}

.alert.alert-danger> :last-child {
  padding-top: 2px;
}

/* Button styling */

.btn {
  padding: 11px;
  height: 44px;
  font-weight: 500;
}

.btn-primary {
  color: #FFFFFF;
  background-color: var(--color-button-primary);
  border-color: var(--color-button-primary);
}

.btn-secondary {
  color: #000000;
  background-color: var(--color-button-secondary);
  border-color: rgba(0, 0, 0, 0.075);
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:active:focus,
.btn-secondary:hover {
  box-shadow: none;
  color: var(--color-link);
  background-color: var(--color-button-secondary);
  border-color: rgba(0, 0, 0, 0.075);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.last-used-badge {
    display: none;
    position: absolute;
    right: 12px;
    top: 12px;
    background: #E8F2FF; /* light blue */
    color: #0D6EFD; /* primary blue */
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.last-used-badge.show { display: inline-block; }
.last-used-button { box-shadow: 0 2px 12px -3px rgb(138 148 210 / 53%); }

/* Logo */

.form-container-logo {
  position: relative;
  width: 165px;
  margin: auto;
  margin-bottom: -24px;
}

/* Responsive adjustments */

@media only screen and (min-width: 769px) {
  body {
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Inter;
  }

  body.no-bg {
    background: none;
  }
}

@media only screen and (max-width: 768px) {
  .wrapper {
    padding: 20px;
    align-items: center;
    height: auto;
  }

  .page-footer {
    margin-top: 20px;
  }

  .form-container {
    width: 100%;
  }
}