:root {
    --navy:       #0b1f4a;
    --blue-mid:   #1249aa;
    --blue-vivid: #1a6cff;
    --cyan:       #00cfde;
    --cyan-dim:   rgba(0,207,222,.18);
    --white:      #ffffff;
    --off-white:  #f4f7ff;
    --muted:      #6b84af;
    --border:     #cad8f0;
    --input-bg:   #edf2fc;
    --error:      #e53e3e;
    --shadow-lg:  0 32px 80px rgba(11,31,74,.22);
  }

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

  body {
    font-family: 'DM Sans', sans-serif;
    background: linear-gradient(135deg, #0b1f4a 0%, #1249aa 60%, #00cfde 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  /* ── CARD ─────────────────────────────── */
  .card {
    display: flex;
    width: min(1060px, 100%);
    min-height: 660px;
     align-items: stretch;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
  }

  /* ── LEFT PANEL ───────────────────────── */
  .left {
    flex: 1.15;
    min-width: 420px;
    position: relative;
    overflow: hidden;
    background: red;
  }

  .left-photo {
    position: absolute;
    inset: 0;
    background-image: url('../img/login_signup.jpg');
    background-size: cover;
    background-position: center top;
    filter: brightness(.78) saturate(1.15);
  }

  /* Deep overlay so text reads on photo */
  .left-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      160deg,
      rgba(11,31,74,.72) 0%,
      rgba(18,73,170,.55) 45%,
      rgba(0,207,222,.18) 100%
    );
  }

  /* Glowing cyan pulse rings */
  .pulse-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(0,207,222,.35);
    animation: pulse 4s ease-in-out infinite;
  }
  .pulse-ring:nth-child(1){ width:180px;height:180px;top:30px;left:30px;animation-delay:0s; }
  .pulse-ring:nth-child(2){ width:260px;height:260px;top:-10px;left:-10px;animation-delay:1s;opacity:.5; }
  .pulse-ring:nth-child(3){ width:100px;height:100px;bottom:80px;right:40px;animation-delay:2s; }
  @keyframes pulse {
    0%,100%{ transform:scale(1);   opacity:.35; }
    50%    { transform:scale(1.08);opacity:.7;  }
  }

  /* Floating hex badges */
  .hex-wrap {
    position: absolute;
    bottom: 32px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
  }
  .hex-row { display: flex; gap: 10px; }
  .hex {
    width: 48px; height: 56px;
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,207,222,.4);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s;
    animation: floatHex 5s ease-in-out infinite;
  }
  .hex:hover { transform: scale(1.12); }
  .hex:nth-child(2){ animation-delay:.7s; }
  .hex:nth-child(3){ animation-delay:1.4s; }
  @keyframes floatHex {
    0%,100%{ transform:translateY(0);   }
    50%    { transform:translateY(-6px); }
  }
  .hex svg { width:22px;height:22px; }

  /* Brand on left */
  .brand {
    position: absolute;
    top: 28px; left: 28px;
    display: flex; align-items: center; gap: 10px;
    z-index: 5;
  }
  .brand-icon {
    width: 42px; height: 42px;
    background: rgba(255,255,255,.15);
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
  }
  .brand-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.35rem;
    color: var(--white);
    letter-spacing: .3px;
  }

  /* Caption at bottom-left */
  .caption {
    position: absolute;
    bottom: 36px; left: 32px;
    z-index: 5;
  }
  .caption h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    color: var(--white);
    line-height: 1.25;
    max-width: 220px;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
  }
  .caption p {
    margin-top: 6px;
    font-size: .8rem;
    color: rgba(255,255,255,.7);
    max-width: 200px;
    line-height: 1.5;
  }

  /* ── CURVED DIVIDER ─────────────────────
      S-curve using SVG positioned at the border */
  .divider {
    position: absolute;
    right: -2px; top: 0;
    height: 100%; width: 80px;
    z-index: 6; pointer-events: none;
  }

  /* ── RIGHT PANEL ──────────────────────── */
  .right {
    flex: 1;
    min-width: 0;
    background: var(--white);
    position: relative;
    padding: 58px 64px 50px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* left-side receives the curve overlap */
    padding-left: 64px;
  }

  /* Subtle corner decoration */
  .right::after {
    content: '✚';
    position: absolute;
    top: 28px; right: 32px;
    font-size: 1.6rem;
    color: var(--border);
    opacity: .5;
  }

  /* Tabs */
  .tabs {
    position: absolute;
    top: 34px; right: 52px;
    display: flex; gap: 4px;
  }
  .tab {
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem; font-weight: 600;
    color: var(--muted);
    padding: 6px 20px;
    border-radius: 20px;
    border: none; background: transparent;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
  }
  .tab.active {
    color: var(--blue-vivid);
    border-bottom: 2.5px solid var(--blue-vivid);
    border-radius: 0;
    padding-bottom: 4px;
  }
  .tab:hover:not(.active) { color: var(--navy); }

  /* Heading */
  .heading { margin-bottom: 36px; }
  .heading h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 2.45rem;
    color: var(--navy);
    line-height: 1.15;
  }
  .heading h1 em { font-style: italic; color: var(--blue-vivid); }
  .heading p {
    margin-top: 8px;
    font-size: .9rem;
    color: var(--muted);
    font-weight: 400;
  }

  /* Form */
  .field { margin-bottom: 24px; }

  .field label {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 9px;
  }

  .input-wrap { position: relative; }
  .input-wrap .icon {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--blue-vivid);
    opacity: .65;
    pointer-events: none;
  }

.input-wrap input,
.input-wrap select {
  width: 100%;
  padding: 15px 16px 15px 46px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  outline: none;
  transition: border .2s, box-shadow .2s, background .2s;

  /* important for select */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input-wrap input:focus,
.input-wrap select:focus {
  border-color: var(--blue-vivid);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(26,108,255,.1);
}

/* Placeholder-like styling for select */
.input-wrap select {
  color: #aabbd4;
  font-weight: 400;
}

/* When a real value is selected */
.input-wrap select:valid {
  color: var(--navy);
}

/* dropdown arrow styling */
.input-wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231a6cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

  .input-wrap input::placeholder { color: #aabbd4; font-weight: 400; }

  /* Eye toggle */
  .eye-btn {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; color: var(--muted);
    padding: 2px; line-height: 0;
  }
  .eye-btn:hover { color: var(--blue-vivid); }

  /* Forgot */
  .row-forget {
    display: flex; justify-content: flex-end;
    margin: -8px 0 24px;
  }
  .row-forget a {
    font-size: .8rem; font-weight: 600;
    color: var(--blue-vivid);
    text-decoration: none;
    transition: color .2s;
  }
  .row-forget a:hover { color: var(--navy); }

  /* Remember me */
  .row-remember {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 24px;
  }
  .row-remember input[type=checkbox] {
    width: 17px; height: 17px;
    accent-color: var(--blue-vivid);
    cursor: pointer;
  }
  .row-remember label {
    font-size: .82rem; color: var(--muted);
    cursor: pointer;
  }

  /* Button */
  .btn-signup {
    width: 100%;
    padding: 17px;
    background: linear-gradient(90deg, #0b1f4a 0%, #1a6cff 55%, #00cfde 100%);
    color: var(--white);
    border: none; border-radius: 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 24px rgba(26,108,255,.35);
    transition: transform .15s, box-shadow .15s;
  }
  .btn-signup::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    transform: translateX(-100%);
    transition: transform .5s;
  }
  .btn-signup:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,108,255,.45); }
  .btn-signup:hover::after { transform: translateX(100%); }
  .btn-signup:active { transform: translateY(0); }

  /* Footer note */
  .footer-note {
    margin-top: 18px;
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
  }
  .footer-note a { color: var(--blue-vivid); font-weight: 600; text-decoration: none; }
  .footer-note a:hover { text-decoration: underline; }

  /* Lock badge */
  .lock-badge {
    display: flex; align-items: center; gap: 6px;
    justify-content: center;
    margin-top: 10px;
    font-size: .72rem; color: var(--muted);
  }
  .lock-badge svg { opacity: .55; }

  /* Animate card in */
  .card { animation: cardIn .6s cubic-bezier(.23,1,.32,1) both; }
  @keyframes cardIn {
    from { opacity:0; transform:translateY(28px) scale(.97); }
    to   { opacity:1; transform:translateY(0)     scale(1);   }
  }

/* Signup form modal*/
.modal {
  display: none;             
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* when opened */
.modal.active {
  display: flex;
}

/* modal box */
.modal-content {
  background: #fff;
  width: min(900px, 95%);
  max-height: 90vh;
  overflow-y: auto;

  border-radius: 14px;
  padding: 25px;

  display: grid;
  grid-template-columns: 1fr 1fr; /* 🔥 horizontal layout */
  gap: 15px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* title spans full width */
.modal-content h2 {
  grid-column: span 2;
  margin: 0 0 10px;
}

/* form behaves like grid */
#signupForm {
  display: contents;
}

/* each field styling */
.field {
  display: flex;
  flex-direction: column;
}

/* input wrapper */
.input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

/* input styling */
.input-wrap input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

/* icon */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
}

/* password eye button */
.eye-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.modal-content button[type="submit"],
.modal-content .gender-group {
  grid-column: span 2;
}

/* gender layout */
.gender-group {
  display: flex;
  gap: 15px;
  padding: 5px 0;
}