*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --dark: #1e2340;
      --accent: #4f6ef7;
      --accent-hover: #3a57d4;
      --light: #f4f5fb;
      --white: #ffffff;
      --border: #dde1f0;
      --text: #2d3160;
      --muted: #8a8faf;
      --input-bg: #f8f9ff;
      --error: #e74c3c;
    }

    html, body {
      height: 100%;
       font-family: 'Inter', sans-serif;
      background: var(--light);
      color: #fff8f5;
    }

    /* ── Page Layout ── */
    .page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
      background:#fff8f5;
    
    }

    /* ── Card ── */
    .card {
      width: 100%;
      max-width: 900px;
      display: grid;
      grid-template-columns: 340px 1fr;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(30,35,64,0.14), 0 4px 16px rgba(30,35,64,0.06);
      animation: fadeUp 0.5s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Left Panel ── */
   .panel-left {
    background: linear-gradient(#1e2340d4, #1e2340d6), /* overlay */ url(https://img.freepik.com/free-photo/hand-holding-house-real-estate-property-model_53876-129010.jpg?semt=ais_hybrid&w=740&q=80) no-repeat center center / cover;
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
    .panel-left::before {
      content: '';
      position: absolute;
      width: 260px; height: 260px;
      border-radius: 50%;
      background: rgba(79,110,247,0.15);
      bottom: -60px; right: -80px;
    }

    .panel-left::after {
      content: '';
      position: absolute;
      width: 120px; height: 120px;
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
      top: 80px; left: -30px;
    }

    .back-link {
            margin-bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color:#585858;
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      transition: color 0.2s;
      position: relative; z-index: 1;
    }

    .back-link:hover { color: #000; }

    .back-link svg { width: 16px; height: 16px; }

    .brand {
      position: relative; z-index: 1;
    }

    .brand-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .brand-icon {
      width: 44px; height: 44px;
      background: var(--accent);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
    }

    .brand-icon svg { width: 24px; height: 24px; fill: #fff; }

    .brand-name {
    font-family: 'Inter', sans-serif;
      color: #fff;
      font-size: 22px;
      line-height: 1.1;
    }

    .brand-name span {
      display: block;
      font-size: 13px;
     font-family: 'Inter', sans-serif;
      font-weight: 500;
      letter-spacing: 3px;
      color: var(--accent);
      text-transform: uppercase;
    }

    .panel-tagline {
      color: rgb(255, 255, 255);
      font-size: 13px;
      line-height: 1.6;
      position: relative; z-index: 1;
    }

    /* ── Right Panel ── */
    .panel-right {
      background: var(--white);
      padding: 44px 44px;
      display: flex;
      flex-direction: column;
    }

    .form-title {
      font-family: 'Inter', sans-serif;
      font-size: 28px;
      color: var(--dark);
      margin-bottom: 25px;
    }

    .form-subtitle {
      font-size: 13.5px;
      color: var(--muted);
      margin-bottom: 28px;
    }

    /* ── Fields ── */
    .field {
      margin-bottom: 18px;
      position: relative;
    }

    .field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .input-wrap {
      position: relative;
    }

   .input-wrap > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
      width: 16px; height: 16px;
      color: var(--muted);
      pointer-events: none;
    }

    .field input,
    .field select {
      width: 100%;
      background: var(--input-bg);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 11px 14px 11px 40px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      appearance: none;
    }

    .field input::placeholder { color: var(--muted); }

    .field input:focus,
    .field select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(79,110,247,0.12);
      background: #fff;
    }

    .field input.error { border-color: var(--error); }

    .field-error {
      font-size: 11.5px;
      color: var(--error);
      margin-top: 4px;
      display: none;
    }

    .field input.error + .field-error,
    .field select.error ~ .field-error { display: block; }

    /* Select arrow */
    .select-wrap::after {
      content: '';
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-top-color: var(--muted);
      pointer-events: none;
    }

    /* ── Password row ── */
    .pw-toggle {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      padding: 0;
      display: flex;
    }

    .pw-toggle svg { width: 17px; height: 17px; }

    .field input[type="password"],
    .field input[type="text"].pw {
      padding-right: 42px;
    }

    /* ── Captcha placeholder ── */
    .captcha-box {
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--input-bg);
      margin-bottom: 18px;
    }

    .captcha-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .captcha-check {
      width: 20px; height: 20px;
      border: 2px solid var(--border);
      border-radius: 3px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      background: #fff;
      transition: background 0.2s, border-color 0.2s;
      flex-shrink: 0;
    }

    .captcha-check.checked {
      background: var(--accent);
      border-color: var(--accent);
    }

    .captcha-check.checked svg { display: block; }
    .captcha-check svg { display: none; width: 12px; height: 12px; fill: #fff; }

    .captcha-label { font-size: 13px; color: var(--text); }

    .captcha-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-size: 9px;
      color: var(--muted);
    }

    .captcha-logo svg { width: 28px; height: 28px; }

    /* ── Terms ── */
    .terms-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 22px;
    }

    .terms-row input[type="checkbox"] {
      width: 16px; height: 16px;
      margin-top: 2px;
      accent-color: var(--accent);
      cursor: pointer;
      flex-shrink: 0;
    }

    .terms-row label {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.5;
      cursor: pointer;
    }

    .terms-row label a {
      color: var(--accent);
      text-decoration: none;
    }

    .terms-row label a:hover { text-decoration: underline; }

    /* ── Submit ── */
    .btn-submit {
      width: 100%;
      background:#c8102e;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 13px;
      font-size: 15px;
      font-weight: 600;
       font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
     
      margin-bottom: 20px;
    }

    .btn-submit:hover {
      background: #0f1f3d;
      /*box-shadow: 0 6px 18px rgba(79, 110, 247, 0.4);*/
    }

    .btn-submit:active { transform: scale(0.98); }

    .btn-submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .login-link {
      text-align: center;
      font-size: 13px;
      color: var(--muted);
    }

    .login-link a {
      color: var(--accent);
      font-weight: 600;
      text-decoration: none;
    }
    .login-link {
    margin-top: 17px;
    }

    .login-link a:hover { text-decoration: underline; }

    /* ── Divider ── */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 0;
      color: var(--muted);
      font-size: 12px;
    }

    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ── Success overlay ── */
    .success-overlay {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex: 1;
      text-align: center;
    }

    .success-overlay.show { display: flex; }
    .form-body.hide { display: none; }

    .success-icon {
      width: 64px; height: 64px;
      background: rgba(79,110,247,0.1);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }

    .success-icon svg { width: 32px; height: 32px; color: var(--accent); }

    .success-overlay h2 {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      color: var(--dark);
    }

    .success-overlay p { font-size: 13.5px; color: var(--muted); }
    .top-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted); /* dark color */
  text-decoration: none;
  margin-bottom: 12px;
}

.top-back svg {
  width: 14px;
  height: 14px;
}

.top-back:hover {
  color: var(--accent);
}

    /* ── Mobile ── */
    @media (max-width: 700px) {
      .card {
        grid-template-columns: 1fr;
        max-width: 420px;
      }

      .panel-left {
        padding: 28px 24px 24px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
      }

      .panel-left::before { display: none; }
      .panel-left::after  { display: none; }

      /*.back-link { position: absolute; top: 16px; left: 20px; }*/

      .brand { margin-top: 32px; }

      .brand-logo { margin-bottom: 0; }

      .panel-tagline { display: none; }

      .panel-right {
        padding: 19px 24px 32px;
      }

      .form-title { font-size: 22px; }
    }

    @media (max-width: 380px) {
      .panel-right { padding: 22px 16px 28px; }
    }
 .divider {
  text-align: center;
  margin: 18px 0;
  font-size: 13px;
  color: #888;
}

.social-login-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px; /*  proper spacing */
  margin-top: 16px;
}

.circle-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.25s ease;
}

/* ICON */
.circle-btn i {
  color: #fff;   /* white icon */
  font-size: 18px;
}

/* BRAND COLORS (FULL FILL) */
.google {
  background: #db4437;
}

.facebook {
  background: #1877f2;
}

.twitter {
  background: #000;
}

/* HOVER EFFECT */
.circle-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

@media (max-width: 700px) {

  /* only left panel back button */
  .panel-left .back-link {
    position: absolute;
    top: 16px;
    left: 20px;
  }

  /* right side form back button fix */
  .top-back {
    position: static !important;
    margin-bottom: 12px;
    font-size: 12.5px;
  }

}

@media (max-width: 700px) {

  /* override all old styles */
  .top-back {
    position: static !important;
    top: unset !important;
    left: unset !important;
    margin-bottom: 12px !important;
    display: inline-flex;
  }

}