src/app/homepage/sign-up/sign-up.component.css

:host {
  display: block;
  width: 100%;
  min-height: 100vh;
}

.signup-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7fafd;
}

.signup-container {
  display: flex;
  width: 100vw;
  max-width: 1200px;
  min-height: 600px;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.signup-panel-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

.signup-panel-right {
  flex: 1 1 0;
  background: #f7fafd;
}

.create-card {
  background: #fff;
  width: 90%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 38px 38px 28px 38px;
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(2, 6, 23, 0.18), 0 0 0 2px rgba(56, 189, 248, 0.08);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  transform: translateY(-8px);
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.18);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.create-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.22);
}

@media (max-width: 700px) {
  .create-card {
    transform: none;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.12);
  }

  .create-card:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .create-card,
  .create-card:hover {
    transition: none;
    transform: none;
  }
}

.create-title {
  font-size: 2.1rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: 0.6px;
  color: #23395d;
}

.signup-title.center-title {
  text-align: center;
  margin-bottom: 32px;
  width: 100%;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #23395d;
  text-shadow: 0 2px 8px #0008;
  margin-top:24px;
  /* animation: logoGlow 3.5s ease-in-out infinite; */
}

@keyframes logoGlow {
  0% {
    text-shadow: 0 2px 8px #0008, 0 0 12px #38bdf8, 0 0 6px #13bfa6;
  }

  100% {
    text-shadow: 0 2px 8px #0008, 0 0 32px #38bdf8, 0 0 18px #13bfa6;
  }
}

.create-form {
  width: 100%;
  max-width: 580px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 16px;
  align-items: start;
  margin-bottom: 10px;
  padding: 25px;
  padding-top: 0px;
}

.terms-info {
  color: #137ec4;
  font-size: 1.08rem;
  font-weight: 600;
  text-align: left;
  margin: 12px 0 0 0;
  letter-spacing: 0.5px;
  display: block;
  margin-left: 25px !important; /* align with .twofa-methods and .form-checkbox */
}

.form-row {
  display: contents;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

  .form-field label {
    color: #e6f7f9;
    font-size: 1rem;
    font-weight: 600;
    color: #23395d;
    letter-spacing: 0.5px;
  }

  .form-field input,
  .form-field select {
    background: #fff;
    color: #23395d;
    border: none;
    border-radius: 8px;
    padding: 3px 10px 3px 10px;
    font-size: 1rem;
    margin-bottom: 2px;
    box-shadow: 0 1px 4px #0002;
    transition: border 0.2s, box-shadow 0.2s;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    box-sizing: border-box;
  }

    .form-field input:focus,
    .form-field select:focus {
      outline: 2px solid #1de9b6;
      border-color: #1de9b6;
      box-shadow: 0 0 6px rgba(56, 189, 248, 0.5), 0 0 0 2px #1de9b688;
    }

    .form-field input:focus {
      box-shadow: 006px rgba(14,165,164,0.08);
      border-color: #0ea5a4;
    }

    .form-field input::placeholder {
      color: #b0b8c1;
      opacity: 1;
    }

  /* Reserve extra space when an eye toggle is present so text doesn't overlap and layout stays stable */
  .form-field.has-eye input {
    padding-right: 46px; /* enough for the eye button + spacing */
  }

  /* Anchor wrapper for inputs that include an eye toggle */
  .input-with-eye {
    position: relative;
    display: block;
    height: 46px; /* match input height so the eye is vertically stable */
    box-sizing: border-box;
  }

  /* Ensure the input fills the wrapper and reserves space for the eye */
  .input-with-eye input {
    padding-right: 50px; /* space for the eye */
    height: 79%;
    box-sizing: border-box;
  }

  /* More specific selector so the eye is positioned relative to the wrapper and won't shift */
  .input-with-eye .eye-toggle {
    position: absolute;
    right: 10px;
    top: 41%;
    transform: translateY(-50%);
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: #23395d;
    z-index: 2; /* keep above input */
    pointer-events: auto;
  }

  /* Keep the original .form-field .eye-toggle as a fallback but prefer the wrapper-based positioning */
  .form-field .eye-toggle {
    /* fallthrough for any other usages; do not change */
  }

  /* Eye toggle inside password field for sign-up: vertically center and avoid movement */
.form-field .eye-toggle {
  position: absolute;
  right: 0px;
  top: 41%;
  transform: translateY(-50%);
  /*    background: #fff;*/
  border: transparent;
  width: 32px;
  height: 32px;
  display: flex;
  background: transparent;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: #23395d;
  z-index: 0;
  pointer-events: auto;
}
  .form-field .eye-toggle i {
    font-size: 0.95rem;
    line-height: 1;
  }
 
  .form-field .eye-toggle:focus {
    outline: 2px solid rgba(29,233,182,0.12);
  }

.form-checkbox {
      display: flex;
    gap: 10px;
    align-items: center;
    color: #2b5160;
    margin-top: -19px; /* normalized spacing */
    margin-left: 25px !important; /* enforce consistent left alignment */
}

  .form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0; /* gap handles spacing */
    padding: 0;
    box-sizing: border-box;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 2px solid #cbd5e1; /* subtle border */
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-bottom: 0px;
  }
input#twoFAOptIn {
  margin-top: 0; /* remove extra offset which caused misalignment */
}

  /* Checked state - show a simple tick using box-shadow trick (keeps no extra elements) */
  .form-checkbox input[type="checkbox"]:checked {
    background: linear-gradient(180deg, #38bdf8, #137ec4);
    border-color: #137ec4;
  }

  .form-checkbox input[type="checkbox"]:checked::after {
    content: '\2713'; /* check mark */
    color: #083344;
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    line-height: 1;
  }

  /* Keep label aligned and allow wrapping */
  .form-checkbox label {
    display: inline-block;
    line-height: 1.2;
    cursor: pointer;
  }

  /* New: 2FA styles moved from inline */
.twofa-field {
  grid-column: 1 / -1;
  padding-top: 0px;
  margin-left: 0;
}

.twofa-section {
  margin-top: 6px;
}

.twofa-label-bold {
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  margin-left: 25px; /* match .form-checkbox and form padding */
}

.twofa-methods {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: 25px !important; /* start at same x as checkbox label */
}

.inline-control {
  display: flex;
  gap: 6px;
  align-items: center;
}

.twofa-email-options .twofa-alt-email,
.twofa-sms-options {
  margin-top: 8px;
  margin-left: 25px !important; /* align alt inputs with checkbox label */
}

.twofa-alt-email input,
.twofa-sms-options input {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  height: 36px;
  box-shadow: 0 1px 4px #0002;
}

.twofa-alt-email input:focus,
.twofa-sms-options input:focus {
  outline: 2px solid #1de9b6;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

/* Reduce SMS input width only (override the earlier100% width) */
.twofa-sms-options input {
 width:260px; /* reduced fixed width for SMS input */
 max-width:100%;
}

.twofa-sms-options label {
 display: block;
 margin-bottom:6px; /* small gap -- reduced */
 font-weight:600;
 color: #23395d;
}

.twofa-sms-options input {
 margin-top:4px; /* tiny gap to bring input closer to label */
}

.twofa-error {
  display: block;
  margin-top: 8px;
}

.twofa-sms-options input[readonly] {
  background: #f3f4f6;
}

/* 2FA single-line row: checkbox + method radios aligned */
.twofa-row {
 display: flex;
 align-items: center;
 gap:14px; /* small gap between checkbox label and method controls */
}

/* ensure checkbox block has same spacing as other checkboxes */
.twofa-checkbox {
 margin-left:0px !important;
 margin-top:0px;
}

/* plain control: no extra background, keep text and control inline */
.plain-control {
 background: transparent;
 padding:0;
 margin:0;
 display: inline-flex;
 align-items: center;
 gap:8px;
 color: inherit;
}

/* ensure radios align vertically with checkbox center */
.plain-control input[type="radio"] {
 width:16px;
 height:16px;
 margin:0;
}

/* Small responsive tweaks */
@media (max-width: 900px) {
  .twofa-methods {
    flex-direction: column;
    align-items: flex-start;
  }

  .twofa-field .form-checkbox {
    margin-left: 0;
  }
}

.create-btn {
  width: 50%;
  max-width: 320px;
  background: #23395d;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  border: none;
  box-shadow: 0 10px 30px rgba(3, 20, 36, 0.32);
  cursor: pointer;
  font-size: 1.15rem;
  margin-top: 100px;
  margin-left: 0; /* remove previous fixed offset */
  margin-right: 0;
  margin-bottom: 0;
  display: block;
  margin-inline: auto; /* center horizontally */
}

.create-btn:hover {
  background: #38bdf8;
  color: #fff;
}

/* Grey out disabled create button */
.create-btn[disabled] {
 background: #b8c6d6;
 color: #fff;
 cursor: not-allowed;
 box-shadow: none;
}

.create-login-link {
  grid-column: 1 / -1;
  text-align: center;
  color: #137ec4;
  margin-top: 0px;
}

  .create-login-link a {
    color: #137ec4;
    font-weight: 700;
  }

.create-footer {
  grid-column: 1 / -1;
  text-align: center;
  color: #010207;
  font-size: 0.9rem;
  margin-top: 8px;
}

.form-field .error {
  color: #ff5252;
  font-size: 0.85rem;
  margin-top: 0px;
  margin-left: 10px;
}



.welcome-info-box {
  position: absolute;
  top: 32px;
  left: 0;
  width: 100%;
  padding: 0 32px;
  z-index: 2;
  text-align: left;
}

.welcome-info-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.welcome-info-desc {
  font-size: 1.08rem;
  color: #fff;
  margin-bottom: 8px;
}

.welcome-info-link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

  .welcome-info-link:hover {
    color: #23395d;
  }

.rotation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rotation-item {
  display: inline-block;
  will-change: transform;
  pointer-events: auto;
  position: relative;
}

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }
}

.rotation-item:nth-child(1) {
  animation: rotateAnimation 24s linear infinite;
  z-index: 1;
}

.rotation-item:nth-child(2) {
  animation: rotateAnimation 36s linear infinite;
}

/* Extra whitespace and centering for small screens */
@media (max-width: 900px) {
  .signup-container {
    flex-direction: column;
    width: 98vw;
    align-items: center;
    justify-content: center;
  }

  .signup-panel-right {
    padding: 18px 6vw;
  }

  .create-card {
    padding: 18px 6vw;
    margin: 0 auto;
  }

  .create-form {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .create-btn {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .create-card {
    padding: 10px 2vw;
  }

  .signup-panel-right {
    padding: 10px 2vw;
  }
}

.signin-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 38px;
  height: 38px;
  border: none;
  background: #14263c;
  color: #fff;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px #0005;
}

  .signin-close:hover {
    background: #38bdf8;
    color: #18314a;
  }

.side-bg-shapes,
.bg-circle,
.bg-ring,
.circle,
.circle-large1,
.circle-large2,
.circle-large3,
.circle-large4 {
 display: none !important;
 opacity:0 !important;
 pointer-events: none !important;
 animation: none !important;
}

@keyframes floatSlow { }
@keyframes floatSlowReverse { }
@keyframes ringPulse { }

.side-panel.side-right .side-img { display:block !important; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.side-panel.side-right .signup-panel-right, .side-panel.side-right .signup-panel-left { position: relative; z-index:1; }

.welcome-back-title,
.welcome-info-title {
 color: #ffffff !important;
}

.side-panel.side-right .side-img {
 z-index:0 !important; /* image underlay */
}

.side-panel.side-right .side-info-box,
.side-panel.side-right .side-welcome-overlay,
.welcome-info-box,
.welcome-back-title,
.welcome-info-title,
.side-panel.side-right .welcome-back-title {
 position: relative !important;
 z-index:5 !important; /* bring text above image */
 color: #ffffff !important; /* white text */
 text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important; /* improve contrast */
}

.side-panel.side-right .side-info-box p,
.side-panel.side-right .side-welcome-overlay p,
.welcome-info-box p,
.welcome-info-desc {
 color: #ffffff !important;
 text-shadow: 0 1px 6px rgba(0,0,0,0.45) !important;
}

.side-panel.side-right .action-btn,
.side-panel.side-right .panel-cta,
.welcome-line-4,
.side-panel.side-right .action-btn {
 position: relative;
 z-index:6 !important;
}

.side-panel.side-right .side-welcome-overlay,
.side-panel.side-right .side-info-box,
.welcome-info-box {
 position: relative !important;
 z-index:10 !important;
 color: #ffffff !important;
}

.side-panel.side-right .side-welcome-overlay .welcome-back-title,
.side-panel.side-right .side-info-box .welcome-back-title,
.welcome-info-box .welcome-back-title,
.side-panel.side-right .side-welcome-overlay .welcome-back-desc,
.side-panel.side-right .side-info-box .welcome-back-desc,
.welcome-info-box .welcome-info-desc,
.side-panel.side-right .side-welcome-overlay .welcome-line-3,
.side-panel.side-right .side-info-box .welcome-line-3 {
 color: #ffffff !important;
 text-shadow: 02px 8px rgba(0,0,0,0.6) !important;
}

.side-panel.side-right .side-welcome-overlay a,
.side-panel.side-right .side-info-box a,
.welcome-info-box a {
 color: #ffffff !important;
 text-decoration: underline;
}


@media (max-width:900px) {
 .side-panel.side-right .side-info-box,
 .welcome-info-box { max-width:92% !important; padding:12px !important; }
 .side-panel.side-right .side-info-box .side-info-title,
 .welcome-info-box .welcome-info-title { font-size:1.25rem !important; }
 .side-panel.side-right .side-info-box .side-info-desc,
 .welcome-info-box .welcome-info-desc { font-size:0.98rem !important; }
 .side-panel.side-right .side-info-box .action-btn { padding:8px 12px !important; }
}


.info-btn {
  background: #23395d;
  color: #fff;
  border: none;
  border-radius: 20%;
  width: 20px;
  height: 20px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  margin-left: 1px;
}

.info-popup-bg {
  position: fixed;
  inset: 0;
  background: rgba(30,41,59,0.45);
  backdrop-filter: blur(2px);
  z-index:;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-popup {
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  box-shadow: 08px 32px #38bdf844, 0024px #1e293b88;
  padding: 24px 28px 18px 28px;
  min-width: 320px;
  max-width: 90vw;
  text-align: left;
  font-size: 0.98rem;
  color: #23395d;
  position: relative;
  font-family: inherit;
  left: 840px;
}

.info-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #38bdf8;
  letter-spacing: 0.5px;
}

.info-text {
  font-size: 0.95rem;
  color: #23395d;
  opacity: 0.95;
}

.info-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: #38bdf8;
  color: #fff;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* Floating info popup (small) */
.info-popup-bg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.info-popup {
  background: rgba(255,255,255,0.98);
  width: 420px;
  max-width: calc(100% -48px);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.18);
  position: relative;
  color: #23395d;
  font-size: 0.95rem;
}

.info-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: #38bdf8;
  color: #fff;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.info-title {
  color: #38bdf8;
  font-weight: 800;
  margin-bottom: 8px;
  padding-left: 6px;
}

.info-text ul {
  list-style: disc;
  padding-left: 22px;
  margin: 6px 0;
}

.info-text li {
  margin-bottom: 8px;
  line-height: 1.35;
}

  .info-text li strong {
    display: inline-block;
    width: 120px;
    font-weight: 800;
  }

/* Ensure popup scales on small screens */
@media (max-width:520px) {
  .role-help-modal, .info-popup {
    width: auto;
    margin: 016px;
    padding: 12px;
  }

  .role-help-list li strong, .info-text li strong {
    display: block;
    width: auto;
    margin-bottom: 4px;
  }
}

/* Email display for2FA: plain text and label aligned with other controls */
.twofa-email-display {
 margin-left:25px;
 margin-top:8px;
 display: flex;
 gap:12px;
 align-items: center;
}
.twofa-email-label {
 font-weight:600;
 color: #23395d;
}
.twofa-email-value {
 color: #516b78;
 font-weight:600;
}

/* remove any residual styles for alternate email inputs */
.twofa-alt-email { display: none !important; }

/* Cross indicator under invalid fields */
.field-cross {
 color: #ff5252;
 font-weight:800;
 margin-top:4px;
 font-size:1rem;
}

/* Ensure input wrapper has room for cross under it */
.form-field { position: relative; margin-bottom:8px; }

/* Ensure main-panel is a positioned container so pinned controls can be placed inside it */
.main-panel {
 position: relative;
 /* reserve space so form content doesn't overlap pinned controls */
 padding-bottom:120px; /* space for button + footer */
}

/* Pin the create button to the bottom center of the viewport (fixed) so it does not move when form content changes */
.main-panel .create-btn {
 position: fixed; /* was absolute - changed to fixed */
 left:86%;
 transform: translateX(-50%);
 bottom:56px; /* distance above footer */
 width:48%;
 max-width:360px;
 margin:0;
 z-index:50;
}

/* Pin the footer/version text to the bottom center of the viewport (fixed) */
.main-panel .create-footer {
 position: fixed; /* was absolute - changed to fixed */
 left:86%;
 transform: translateX(-50%);
 bottom:16px;
 z-index:50;
 width:100%;
 text-align: center;
 pointer-events: none;
}

/* Make sure Google row and other form elements don't get hidden behind the pinned controls */
.main-panel .google-signup-row {
 margin-bottom:96px;
}

/* Remove any large flow margin on create button and rely on pinned positioning */
.create-btn { margin-top:0; }

/* Responsive adjustments */
@media (max-width:900px) {
 .main-panel { padding-bottom:150px; }
 .main-panel .create-btn {
 bottom:86px;
 width:90%;
 max-width: none;
 }
 .main-panel .create-footer { bottom:12px; }
 .main-panel .google-signup-row { margin-bottom:120px; }
}

/* Keep disabled styling intact */
.create-btn[disabled] { opacity:0.9; }
/* Cross shown inside confirm password input wrapper when mismatch */
.input-with-eye { position: relative; }
/* Removed the inside-cross element */
/* .input-with-eye .inside-cross { ... } */

/* Password field layout: label + gap + cross */
.password-field {
 display: flex;
 flex-direction: column;
}
.password-field label {
 display: flex;
 align-items: center;
 gap:8px;
}

/* Hide validation cross labels globally on sign-up without affecting form logic */
.label-cross { display: none !important; visibility: hidden !important; }
/* If any confirm-password cross indicator relies on a class, neutralize it */
.input-with-eye.confirm-cross::after { content: none !important; }