/*----------------------------------------------
GPTC PT Portal: login / company registration page
Top bar, blue welcome panel on the left, form card on the right.
----------------------------------------------*/

* {
  box-sizing: border-box;
}

body.ptl-body {
  background: #eef4fc;
  color: #10244d;
  margin: 0;
}

.ptl-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top bar */
.ptl-top {
  align-items: center;
  background: #ffffff;
  box-shadow: 0 1px 0 #e3eaf5;
  display: flex;
  gap: 28px;
  padding: 12px 6%;
  position: relative;
  z-index: 5;
}

.ptl-top-logo img {
  display: block;
  height: 42px;
  width: auto;
}

.ptl-top-title {
  color: #0d2a63;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ptl-top-tag {
  color: #1c4a9c;
  font-size: 15px;
  margin-left: auto;
  padding-bottom: 8px;
  position: relative;
}

.ptl-top-tag::after {
  background: linear-gradient(90deg, #1d5fd6, #38b2f5);
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 50px;
}

/* Two columns: welcome panel and form card */
.ptl-main {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  position: relative;
}

/* Soft wave along the bottom of the blue panel */
.ptl-main::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C220 6 470 4 720 44 C960 82 1200 112 1440 70 L1440 120 L0 120 Z' fill='%23bcd9fb' opacity='.55'/%3E%3Cpath d='M0 62 C240 22 480 22 720 60 C960 98 1200 118 1440 88 L1440 120 L0 120 Z' fill='%23eef4fc'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  bottom: 0;
  content: "";
  height: 120px;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 2;
}

/* Welcome panel */
.ptl-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 40px 18px 6vw;
  position: relative;
}

.ptl-hero-shape {
  background: linear-gradient(90deg, #083678 0%, #0a3a7c 30%, #114b97 52%, #1559ad 100%);
  border-radius: 0 42% 46% 0 / 0 58% 62% 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

/* Lab photo in its curved frame. The picture carries the curve on both sides,
   so its edges are faded into the blue on the left and the page colour on the right. */
.ptl-hero-art {
  background: url("../images/pt-portal-hero.jpg") right center / auto 100% no-repeat;
  bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 95%, transparent 100%);
  position: absolute;
  right: 0;
  top: 0;
  width: 46%;
}

/* With the photo showing, the blue runs straight up to it and the photo supplies the curve */
@media (min-width: 1200px) {
  .ptl-hero-shape {
    background:
      linear-gradient(90deg, transparent 94%, #eef4fc 94%),
      linear-gradient(90deg, #083678 0%, #0a3a7c 30%, #114b97 52%, #1559ad 100%);
    border-radius: 0;
  }
}

.ptl-hero-inner {
  color: #ffffff;
  max-width: 450px;
  position: relative;
  z-index: 3;
}

.ptl-hero h1 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 14px;
}

.ptl-hero h1 span {
  color: #7cc9ff;
}

.ptl-lead {
  color: rgba(255, 255, 255, 0.94);
  font-size: 17px;
  line-height: 1.45;
  margin: 0 0 20px;
}

.ptl-steps {
  counter-reset: ptl-step;
  list-style: none;
  margin: 0 0 0 14px;
  padding: 0;
}

.ptl-steps li {
  align-items: center;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  counter-increment: ptl-step;
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
  padding: 12px 16px 12px 26px;
  position: relative;
}

.ptl-steps li::before {
  align-items: center;
  background: #ffffff;
  border-radius: 50%;
  color: #0d3a8c;
  content: counter(ptl-step);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  left: -14px;
  position: absolute;
  top: 12px;
  width: 28px;
}

.ptl-step-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #ffffff;
  display: flex;
  flex: 0 0 62px;
  font-size: 28px;
  height: 62px;
  justify-content: center;
}

.ptl-steps h2 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}

.ptl-steps p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0;
}

/* Feature tiles sitting on the wave */
.ptl-tiles {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.ptl-tile {
  background: #e4effd;
  border-radius: 10px;
  color: #0d2a63;
  flex: 1 1 0;
  padding: 10px 6px 8px;
  text-align: center;
  white-space: nowrap;
}

a.ptl-tile {
  text-decoration: none;
  transition: background .2s ease;
}

a.ptl-tile:hover,
a.ptl-tile:focus {
  background: #d3e4fb;
  color: #0d2a63;
  text-decoration: none;
}

.ptl-tile i {
  color: #1d5fd6;
  display: block;
  font-size: 24px;
  margin-bottom: 6px;
}

.ptl-tile strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
}

.ptl-tile span {
  color: #3f557f;
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

/* Form card */
.ptl-side {
  align-items: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 240'%3E%3Cg fill='%23dbe6f5' opacity='.7'%3E%3Cpath d='M82 6l32 18v37L82 79 50 61V24z'/%3E%3Cpath d='M44 72l32 18v37l-32 18-32-18V90z'/%3E%3Cpath d='M82 138l32 18v37l-32 18-32-18v-37z'/%3E%3C/g%3E%3C/svg%3E") right 8px top 42% / 96px auto no-repeat;
  display: flex;
  justify-content: center;
  padding: 34px 6% 34px 28px;
  position: relative;
  z-index: 3;
}

.ptl-card {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(16, 58, 140, 0.14), 0 3px 10px rgba(16, 58, 140, 0.05);
  max-width: 460px;
  padding: 20px 34px 22px;
  width: 100%;
}

/* The registration form holds more rows, so its card is packed a little tighter */
.ptl-page.is-register .ptl-card {
  padding: 16px 28px 18px;
}

.ptl-card-logo {
  display: block;
  margin: 0 auto 8px;
  max-width: 200px;
  width: 72%;
}

.ptl-card-title {
  color: #0d2a63;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  padding-bottom: 10px;
  position: relative;
  text-align: center;
}

.ptl-card-title::after {
  background: linear-gradient(90deg, #1d5fd6, #38b2f5);
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 48px;
}

.ptl-card-sub {
  color: #4a5b7d;
  font-size: 13.5px;
  margin: -10px 0 8px;
  text-align: center;
}

/* Only one of the two forms is shown at a time */
.ptl-page.is-register .sign-in-form,
.ptl-page:not(.is-register) .sign-up-form {
  display: none;
}

.ptl-label {
  color: #10244d;
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin: 10px 0 5px;
}

.ptl-field {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #dbe3f0;
  border-radius: 10px;
  display: flex;
  height: 42px;
  padding: 0 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ptl-field:focus-within {
  border-color: #1d5fd6;
  box-shadow: 0 0 0 3px rgba(29, 95, 214, 0.16);
}

.ptl-field > i {
  color: #7d8aa5;
  flex: 0 0 26px;
  font-size: 16px;
  text-align: center;
}

.ptl-field:focus-within > i {
  color: #1d5fd6;
}

.ptl-field input {
  background: none;
  border: none;
  color: #10244d;
  flex: 1 1 auto;
  font-size: 14.5px;
  height: 100%;
  min-width: 0;
  outline: none;
  padding: 0 8px;
}

.ptl-field input::placeholder {
  color: #94a0b8;
}

.ptl-eye {
  background: none;
  border: none;
  color: #7d8aa5;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}

.ptl-eye:hover,
.ptl-eye:focus-visible {
  color: #1d5fd6;
  outline: none;
}

.ptl-card .error {
  color: #c62828;
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 4px;
}

.ptl-card .error:empty {
  display: none;
}

.ptl-alert {
  background: #fdeaea;
  border: 1px solid #f5c2c2;
  border-radius: 10px;
  color: #c62828;
  font-size: 13.5px;
  margin-bottom: 4px;
  padding: 9px 14px;
  text-align: center;
}

.ptl-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.ptl-check {
  align-items: center;
  color: #10244d;
  cursor: pointer;
  display: flex;
  font-size: 13.5px;
  gap: 10px;
  margin: 0;
}

.ptl-check input {
  accent-color: #1d5fd6;
  height: 16px;
  width: 16px;
}

.ptl-link {
  color: #1d5fd6;
  font-size: 13.5px;
  font-weight: 500;
}

.ptl-link:hover {
  color: #0d3a8c;
}

/* Buttons */
.ptl-btn {
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  height: 44px;
  justify-content: center;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  width: 100%;
}

.ptl-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(29, 95, 214, 0.35);
  outline: none;
}

.ptl-btn-primary {
  background: linear-gradient(90deg, #1d5fd6 0%, #2e8ff0 60%, #35b0f6 100%);
  border: none;
  box-shadow: 0 10px 22px rgba(29, 95, 214, 0.28);
  color: #ffffff;
  margin-top: 12px;
}

.ptl-btn-primary:hover {
  box-shadow: 0 14px 28px rgba(29, 95, 214, 0.36);
  transform: translateY(-1px);
}

.ptl-btn-primary i {
  position: absolute;
  right: 20px;
}

.ptl-btn-outline {
  background: #ffffff;
  border: 1.5px solid #1d5fd6;
  color: #0d3a8c;
  font-size: 15px;
  gap: 12px;
  text-decoration: none;
}

.ptl-btn-outline i {
  color: #1d5fd6;
  font-size: 18px;
}

.ptl-btn-outline:hover {
  background: #eef4fe;
  color: #0d3a8c;
  text-decoration: none;
}

.ptl-or {
  align-items: center;
  color: #6d7a95;
  display: flex;
  font-size: 12.5px;
  gap: 14px;
  margin: 12px 0;
}

.ptl-or::before,
.ptl-or::after {
  background: #e3e9f3;
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

/* Company registration form */
.sign-up-form .signup-grid {
  margin-left: -7px;
  margin-right: -7px;
}

.sign-up-form .signup-grid > [class*="col-"] {
  padding-left: 7px;
  padding-right: 7px;
}

.sign-up-form .ptl-label {
  font-size: 12.5px;
  margin: 10px 0 4px;
}

.sign-up-form .ptl-field {
  height: 42px;
}

.sign-up-form .ptl-field input {
  font-size: 14px;
}

.signup-captcha {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.ptl-switch {
  color: #4a5b7d;
  font-size: 13.5px;
  margin: 14px 0 0;
  text-align: center;
}

.ptl-switch a {
  color: #1d5fd6;
  font-weight: 600;
}

/* Footer */
.ptl-foot {
  align-items: center;
  color: #3f557f;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px 24px;
  justify-content: space-between;
  padding: 12px 6% 16px;
}

.ptl-foot-links a,
.ptl-foot-copy a {
  color: #0d2a63;
}

.ptl-foot-links a + a::before {
  color: #9aa8c2;
  content: "|";
  display: inline-block;
  margin: 0 12px;
}

/* OTP popup */
.otp-modal .modal-content {
  border: none;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 58, 140, 0.25);
  overflow: hidden;
}

.otp-modal .modal-header {
  background: linear-gradient(120deg, #0a3a94, #1b7fe0);
  border: none;
  border-radius: 0;
  color: #ffffff;
  padding: 20px 25px;
}

.otp-modal .modal-title {
  font-size: 18px;
  font-weight: 700;
}

.otp-modal .modal-title i {
  margin-right: 8px;
}

.otp-modal .modal-header .close {
  color: #ffffff;
  opacity: 0.85;
  text-shadow: none;
}

.otp-modal .modal-body {
  padding: 30px 25px 20px;
  text-align: center;
}

.otp-modal .otp-icon i {
  color: #1d5fd6;
  font-size: 48px;
  opacity: 0.3;
}

.otp-modal .modal-body p {
  color: #4a5b7d;
  font-size: 15px;
  line-height: 1.6;
  margin: 15px 0 25px;
}

.otp-modal .otp-boxes {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 5px;
}

.otp-modal .otp-box {
  border: 2px solid #dbe3f0;
  border-radius: 10px;
  color: #10244d;
  font-size: 24px;
  font-weight: 700;
  height: 55px;
  padding: 0;
  text-align: center;
  width: 45px;
}

.otp-modal .otp-box:focus {
  border-color: #1d5fd6;
  box-shadow: 0 0 0 3px rgba(29, 95, 214, 0.16);
}

.otp-modal .error {
  color: #c62828;
  font-size: 12.5px;
  margin-top: 8px;
}

.otp-modal .otp-resend {
  margin-top: 18px;
}

.otp-modal #resendOtpBtn {
  color: #1d5fd6;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.otp-modal #resendOtpBtn:disabled {
  color: #94a0b8;
  text-decoration: none;
}

.otp-modal #modal_timer {
  font-size: 13px;
  font-weight: 600;
  margin-left: 6px;
}

.otp-modal .modal-footer {
  border: none;
  gap: 12px;
  justify-content: center;
  padding: 15px 25px 25px;
}

.otp-modal .modal-footer .btn {
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  height: 42px;
  margin: 0;
}

.otp-modal .otp-cancel {
  background: #eef1f6;
  color: #4a5b7d;
  width: 120px;
}

.otp-modal .otp-verify {
  background: linear-gradient(90deg, #1d5fd6, #35b0f6);
  color: #ffffff;
  width: 170px;
}

/* Narrower screens */
@media (max-width: 1199px) {
  .ptl-top-tag {
    display: none;
  }

  .ptl-hero {
    padding-left: 6%;
  }

  .ptl-hero h1 {
    font-size: 36px;
  }

  .ptl-main,
  .ptl-page.is-register .ptl-main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .ptl-hero-art {
    display: none;
  }
}

/* Single column: the form comes first, the welcome panel follows */
@media (max-width: 991px) {
  .ptl-main,
  .ptl-page.is-register .ptl-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .ptl-main::after {
    height: 70px;
  }

  .ptl-side {
    order: -1;
    padding: 24px 16px;
  }

  .ptl-hero {
    padding: 30px 20px 20px 30px;
  }

  .ptl-hero-shape {
    border-radius: 0;
  }

  .ptl-hero-inner {
    max-width: none;
  }

  .ptl-tiles {
    margin-top: 22px;
  }
}

@media (max-width: 575px) {
  .ptl-top {
    gap: 14px;
    padding: 10px 16px;
  }

  .ptl-top-logo img {
    height: 32px;
  }

  .ptl-top-title {
    font-size: 15px;
  }

  .ptl-card,
  .ptl-page.is-register .ptl-card {
    padding: 22px 18px 24px;
  }

  .ptl-card-title {
    font-size: 21px;
  }

  .ptl-hero h1 {
    font-size: 30px;
  }

  .ptl-step-icon {
    flex-basis: 48px;
    font-size: 22px;
    height: 48px;
  }

  .ptl-tiles {
    flex-wrap: wrap;
  }

  .ptl-tile {
    flex: 1 1 40%;
  }

  .ptl-foot {
    justify-content: center;
    padding: 12px 16px 16px;
    text-align: center;
  }
}

/*----------------------------------------------
Welcome panel, as in the reference design: blue area with the text beside the
framed photo, then a pale wave across the bottom that carries the feature tiles.
----------------------------------------------*/
.ptl-tiles {
  position: relative;
  z-index: 3;
}

@media (min-width: 992px) {
  .ptl-main::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C300 16 480 22 560 32 C680 48 760 90 886 105 C1010 120 1250 130 1440 128 L1440 140 L0 140 Z' fill='%23b1d1fe'/%3E%3Cpath d='M0 28 C300 18 480 24 560 34 C670 56 770 128 886 130 C1010 136 1250 138 1440 137 L1440 140 L0 140 Z' fill='%23eef4fc'/%3E%3C/svg%3E");
    height: 21.6%;
    min-height: 140px;
  }

  .ptl-hero {
    padding-bottom: 138px;
    padding-top: 20px;
  }

  /* Keep the form card clear of the wave at the bottom */
  .ptl-side {
    padding-bottom: 64px;
    padding-top: 24px;
  }

  .ptl-page.is-register .ptl-side {
    padding-bottom: 44px;
    padding-top: 14px;
  }

  .ptl-tiles {
    bottom: 16px;
    gap: 16px;
    left: 6vw;
    margin: 0;
    position: absolute;
  }

  .ptl-tile {
    flex: 0 0 auto;
    min-width: 98px;
    padding: 10px 12px 8px;
  }
}

@media (min-width: 1200px) {
  /* The photo keeps its own proportions and stops where the wave begins */
  .ptl-hero-art {
    aspect-ratio: 337 / 651;
    bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    max-width: 50%;
    width: auto;
  }

  .ptl-hero-shape {
    background: linear-gradient(90deg, #09377a 0%, #0a3a7e 30%, #1251a0 58%, #1a5cab 95%, #eef4fc 95%);
    bottom: 4px;
  }

  .ptl-hero-inner {
    max-width: 440px;
  }

  .ptl-hero h1 {
    font-size: 38px;
    margin-bottom: 8px;
  }

  .ptl-lead {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .ptl-steps li {
    gap: 16px;
    margin-bottom: 8px;
    padding: 9px 16px 9px 24px;
  }

  .ptl-step-icon {
    flex-basis: 56px;
    font-size: 26px;
    height: 56px;
  }

  .ptl-steps p {
    font-size: 13px;
  }
}

/*----------------------------------------------
Tablet and phone: the form comes first, then the welcome panel as a compact blue block
with the tiles in a 2 x 2 grid above a shallow wave.
----------------------------------------------*/
@media (max-width: 991px) {
  .ptl-side {
    background-image: none;
    padding: 28px 16px 32px;
  }

  .ptl-card {
    margin: 0 auto;
  }

  .ptl-hero {
    padding: 32px 24px 72px;
  }

  .ptl-hero-inner {
    margin: 0 auto;
    max-width: 560px;
    width: 100%;
  }

  .ptl-main::after {
    height: 48px;
  }

  .ptl-tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 24px auto 0;
    max-width: 560px;
    width: 100%;
  }

  .ptl-tile {
    white-space: normal;
  }
}

@media (max-width: 575px) {
  .ptl-top {
    gap: 10px;
    padding: 10px 16px;
  }

  .ptl-top-logo img {
    height: 28px;
  }

  .ptl-top-title {
    font-size: 13px;
    white-space: nowrap;
  }

  .ptl-side {
    padding: 20px 16px 24px;
  }

  .ptl-card,
  .ptl-page.is-register .ptl-card {
    border-radius: 18px;
    padding: 20px 18px 22px;
  }

  .ptl-card-logo {
    max-width: 180px;
  }

  .ptl-card-title {
    font-size: 20px;
  }

  .ptl-hero {
    padding: 28px 16px 64px;
  }

  .ptl-hero h1 {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .ptl-lead {
    font-size: 15px;
    margin-bottom: 18px;
  }

  .ptl-steps {
    margin-left: 12px;
  }

  .ptl-steps li {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 12px 12px 22px;
  }

  .ptl-steps li::before {
    font-size: 13px;
    height: 24px;
    left: -12px;
    width: 24px;
  }

  .ptl-step-icon {
    border-radius: 8px;
    flex-basis: 40px;
    font-size: 18px;
    height: 40px;
  }

  .ptl-steps h2 {
    font-size: 14.5px;
  }

  .ptl-steps p {
    font-size: 13px;
  }

  .ptl-tiles {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }

  .ptl-tile {
    padding: 12px 6px 10px;
  }

  .ptl-foot {
    flex-direction: column;
    font-size: 12.5px;
    gap: 8px;
  }

  .ptl-foot-links a + a::before {
    margin: 0 8px;
  }
}

/* The captcha box has a fixed width, so it is scaled down on the narrowest phones */
@media (max-width: 380px) {
  .ptl-top-title {
    font-size: 12px;
  }

  .signup-captcha > div:first-child {
    transform: scale(0.86);
    transform-origin: center top;
  }
}