/* Mobile authentication cards: embrolab-html/mobile/signup.html. */
@media (max-width: 1024px) {
  .auth-page {
    padding: 32px 18px 48px;
  }

  .auth-page::before {
    display: none;
  }

  .auth-card {
    width: min(100%, 394px);
    max-width: 394px;
    margin-inline: auto;
    padding: 26px 32px 32px;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 20px;
    background: #fff;
  }

  .auth-card__header {
    gap: 5px;
    margin-bottom: 0;
  }

  .auth-card__title {
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: 0;
  }

  .auth-card__subtitle {
    font-size: 14px;
    line-height: 21px;
  }

  .auth-card__oauth {
    margin-top: 17px;
    gap: 12px;
  }

  .auth-card .btn-google {
    height: 44px;
    gap: 8px;
  }

  .auth-card .btn-google span,
  .auth-card .divider-row__label {
    font-size: 14px;
    line-height: 20px;
  }

  .auth-card .divider-row {
    min-height: 20px;
    gap: 12px;
  }

  .auth-card__divider-full {
    width: 100%;
    height: 1px;
    margin: 20px 0 23px;
    border-top: 1px dotted rgb(17 17 17 / 22%);
  }

  .auth-card .auth-form {
    gap: 24px;
  }

  .auth-card .form-fields,
  .auth-card .form-group {
    gap: 16px;
  }

  .auth-card .form-field {
    min-height: 78px;
    gap: 10px;
  }

  .auth-card--register .form-fields > .form-field:first-child {
    margin-bottom: 8px;
  }

  .auth-card--register .form-fields > .form-field:last-child {
    min-height: 0;
  }

  .auth-card .form-field__label {
    font-size: 16px;
    line-height: 22px;
  }

  .auth-card .form-field__required {
    color: #ff3434;
  }

  .auth-card .form-field__control {
    position: relative;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 64.4px;
    box-shadow: 0 0 0 1.4px var(--auth-field-border, rgb(17 17 17 / 20%));
  }

  .auth-card .form-field__control:focus-within {
    --auth-field-border: #7a1f2b;
  }

  .auth-card--register .form-fields > .form-field:first-child .form-field__control:not(.form-field__control--error) {
    --auth-field-border: #7a1f2b;
    background: #f8f8f8;
  }

  .auth-card .form-field__control--error {
    --auth-field-border: #ba1a1a;
  }

  .auth-card .form-field__input {
    min-width: 0;
    height: 44px;
    padding: 8px 45px 8px 16.8px;
    border-radius: inherit;
    font-size: 14px;
    line-height: 28px;
  }

  .auth-card .form-field__toggle {
    position: absolute;
    top: 0;
    right: 4px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
  }

  .auth-card .checkbox-row {
    min-height: 26px;
    gap: 12px;
  }

  .auth-card .checkbox-row__input {
    width: 18px;
    height: 18px;
    margin: 3px;
    border: 2px solid #111;
    border-radius: 2px;
  }

  .auth-card .checkbox-row__input:checked {
    border-color: #7a1f2b;
  }

  .auth-card .checkbox-row__label {
    font-size: 14px;
    line-height: 26px;
  }

  .auth-card .auth-form__actions {
    gap: 14px;
  }

  .auth-card .btn-primary {
    min-height: 48px;
    padding: 11px 24px;
    border-radius: 100px;
  }

  .auth-card .btn-primary span {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
  }

  .auth-card .auth-form__switch {
    min-height: 26px;
    gap: 0 12px;
    font-size: 16px;
    line-height: 26px;
  }

  .auth-card .auth-form__switch-link {
    text-underline-offset: 2px;
  }
}

@media (max-width: 768px) {
  .auth-card {
    padding-inline: clamp(20px, 7.44186vw, 32px);
  }
}