/* Login and register (and the other guest pages): the right side and the phone layout.
   Loaded after iofrm-style.css and iofrm-theme3.css, which stay untouched; scoped by the
   login-side class on <body> in layouts/guest.blade.php.
   Right side: the illustration at 12%, filling the panel from the top; the card with On-Page Tool
   (the logo's rocket, Gilroy Bold, logo red) and Well Researched (its mark, Satisfy, logo blue).
   Phones (992px and below): the same form with phone fixes, and the card under it. */

.login-side .img-holder .bg {
  opacity: .12;
  background-image: url("../images/login-illustration.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
/* spacing by grouping: the title, then each name tight on its own
   description, a clear gap between the two items, and the card's padding even all round */
.login-side .img-holder .info-holder { padding: 26px 30px 28px; }
/* the card sits 5px below the panel's centre on computer screens (phones stack it, see below) */
.login-side .img-holder .info-holder { transform: translateY(calc(-50% + 5px)); }
.login-side .img-holder .info-holder h3 + .sub { margin-top: 30px; }
.login-side .img-holder .info-holder .sub + .sub { margin-top: 34px; }
.login-side .img-holder .info-holder .sub h4 { margin: 0; }
.login-side .img-holder .info-holder .sub p { display: block; margin: 1px 0 0; }
.login-side .img-holder .info-holder .sub.wr p { margin-top: 2px; }
/* the two entries styled like the On-Page logo: its rocket and red for On-Page Tool,
   a matching mark and the logo blue for Well Researched. On-Page Tool in Gilroy Bold
   (the dashboard's font, at the logo's weight); Well Researched in a script (Satisfy, Google Fonts) */
@font-face { font-family: 'Gilroy'; src: url('../shared/assets/fonts/Gilroy/Gilroy-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
.login-side .img-holder .info-holder .sub.op,
.login-side .img-holder .info-holder .sub.wr {
  position: relative;
  padding-left: 48px;
  background: none;
}
/* each mark is its own layer, centred on the heading, so no part of it is clipped */
.login-side .img-holder .info-holder .sub.op::before,
.login-side .img-holder .info-holder .sub.wr::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -6px;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.login-side .img-holder .info-holder .sub.op p,
.login-side .img-holder .info-holder .sub.wr p { padding-right: 0; max-width: 290px; }
.login-side .img-holder .info-holder .sub.op::before { background-image: url(../images/login-mark-onpage.png); }
.login-side .img-holder .info-holder .sub.wr::before { background-image: url(../images/login-mark-well-researched.svg); top: -5px; }
.login-side .img-holder .info-holder .sub.op h4 {
  font-family: 'Gilroy', 'Lato', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 26px;
  color: #DA4F4A;
}
.login-side .img-holder .info-holder .sub.wr h4 {
  font-family: 'Satisfy', cursive;
  font-weight: 400;
  font-size: 25px;
  line-height: 28px;
  color: #3367A3;
  -webkit-text-stroke: 1px #3367A3;
}

@media (max-width: 992px) {
  html, body { height: auto; }
  .form-body { height: auto; min-height: 100%; background-color: #eef1f6; }
  .form-body > .row { height: auto; flex-direction: column-reverse; }

  .form-holder .form-content { display: block; min-height: 0; padding: 44px 24px 0; }
  .form-content .form-items { display: block; max-width: none; }
  .form-content .form-items > p:first-of-type br { display: none; }
  .form-content .form-button { margin-top: 26px; }
  .form-content .form-button .ibtn { width: 100%; margin-right: 0; padding: 12px 20px; font-size: 17px; }
  .form-content .form-button a { display: block; margin-top: 18px; text-align: center; font-size: 14px; }

  .login-side .img-holder {
    display: block;
    position: relative !important;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 64px 24px;
    overflow: hidden;
  }
  .login-side .img-holder .info-holder { top: auto; transform: none; padding: 24px 24px 26px; }
  .login-side .img-holder .info-holder h3 { font-size: 20px; text-wrap: balance; }
  .login-side .img-holder .info-holder p { text-wrap: pretty; }
}