*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --navy: #0a1628;
        --navy2: #112040;
        --navy3: #1e3560;
        --gold: #c8a84b;
        --gold2: #e8c96a;
        --gold3: #f5edd4;
        --white: #ffffff;
        --bg: #f4f5f8;
        --card: #ffffff;
        --border: #e2e6ee;
        --muted: #8a95a8;
        --body: #4a5568;
        --green: #1a9d5c;
      }
      html,
      body {
        height: 100%;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
      }
      body {
        font-family: "Outfit", sans-serif;
      }

      .w-100 {
        width: 100%;
      }

      /* ══ SCREENS ══ */
      .screen {
        position: fixed;
        inset: 0;
        transition:
          opacity 0.4s,
          transform 0.4s;
      }
      .screen.out {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.98);
      }

      /* ══════════════════════
   LOGIN SCREEN
══════════════════════ */
      #loginScreen {
        display: flex;
        flex-direction: column;
        background: var(--navy);
        overflow: hidden;
      }
      .login-bg {
        position: absolute;
        inset: 0;
        background: url("https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=1200&q=80")
          center/cover no-repeat;
        opacity: 0.15;
      }
      .login-grad {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          160deg,
          rgba(10, 22, 40, 0.4) 0%,
          rgba(10, 22, 40, 0.97) 60%,
          #0a1628 100%
        );
      }
      .login-body {
        position: relative;
        z-index: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 28px;
        max-width: 440px;
        width: 100%;
        margin: 0 auto;
      }
      .el-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 44px;
      }
      .el-mark {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        background: var(--gold);
        position: relative;
        box-shadow: 0 8px 24px rgba(200, 168, 75, 0.35);
      }
      .el-mark::before {
        content: "";
        position: absolute;
        left: 11px;
        top: 11px;
        width: 18px;
        height: 3.5px;
        background: var(--navy);
        border-radius: 2px;
        box-shadow:
          0 6px 0 var(--navy),
          0 12px 0 var(--navy);
      }
      .el-mark::after {
        content: "";
        position: absolute;
        left: 11px;
        top: 11px;
        width: 3.5px;
        height: 20px;
        background: var(--navy);
        border-radius: 2px;
      }
      .el-name {
        font-family: "Cormorant Garamond", serif;
        font-size: 26px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 1.5px;
      }
      .el-tag {
        font-size: 9px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        margin-top: 2px;
        font-weight: 500;
      }
      .login-h {
        font-family: "Cormorant Garamond", serif;
        font-size: 30px;
        font-weight: 500;
        color: #fff;
        text-align: center;
        margin-bottom: 8px;
      }
      .login-s {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        margin-bottom: 36px;
        line-height: 1.65;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 7px;
        width: 100%;
        margin-bottom: 14px;
      }
      .field label {
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.35);
        font-weight: 600;
      }
      .field input {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 15px 18px;
        color: #fff;
        font-family: "Outfit", sans-serif;
        font-size: 14px;
        outline: none;
        transition: all 0.2s;
        width: 100%;
      }
      .field input:focus {
        border-color: rgba(200, 168, 75, 0.6);
        background: rgba(200, 168, 75, 0.07);
      }
      .field input::placeholder {
        /* color: rgba(255, 255, 255, 0.18); */
        color: rgba(255, 255, 255, 0.65);
      }
      .field input[type="password"] {
        letter-spacing: 3px;
      }
      .field input[type="password"]::placeholder {
        letter-spacing: 0;
      }
      .login-err {
        background: rgba(239, 68, 68, 0.12);
        border: 1px solid rgba(239, 68, 68, 0.25);
        color: #fca5a5;
        padding: 11px 16px;
        border-radius: 10px;
        font-size: 12.5px;
        text-align: center;
        display: none;
        margin-bottom: 6px;
        width: 100%;
      }
      .login-err.show {
        display: block;
      }
      .login-btn {
        width: 100%;
        background: var(--gold);
        border: none;
        color: var(--navy);
        padding: 16px;
        border-radius: 12px;
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        margin-top: 4px;
        letter-spacing: 0.3px;
        transition: all 0.2s;
        box-shadow: 0 8px 24px rgba(200, 168, 75, 0.3);
      }
      .login-btn:hover {
        background: var(--gold2);
        transform: translateY(-1px);
      }
      .login-help {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.25);
        text-align: center;
        margin-top: 24px;
      }
      .login-help a {
        color: rgba(200, 168, 75, 0.7);
        text-decoration: none;
      }
      .login-foot {
        position: relative;
        z-index: 2;
        padding: 20px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
      }
      .login-foot span {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.15);
        letter-spacing: 2px;
        text-transform: uppercase;
      }

      /* ══════════════════════
   CHAT SCREEN
   Layout: fixed full screen
   Image fills entire bg
   Header pinned top
   Input pinned bottom
   Messages scroll in middle
══════════════════════ */
      #chatScreen {
        display: flex;
        flex-direction: column;
        background: #000;
      }

      /* Full screen background image */
      .chat-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .chat-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
      }
      /* Gradient: dark at top for header, transparent in middle, dark at bottom for input */
      .chat-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(10, 22, 40, 0.75) 0%,
          rgba(10, 22, 40, 0.2) 20%,
          rgba(10, 22, 40, 0.1) 45%,
          rgba(10, 22, 40, 0.55) 70%,
          rgba(10, 22, 40, 0.92) 87%,
          rgba(10, 22, 40, 1) 100%
        );
      }

      /* HEADER — pinned top */
      .chat-head {
        position: relative;
        z-index: 10;
        flex-shrink: 0;
        padding: 14px 18px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .head-back {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(10, 22, 40, 0.5);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .head-logo {
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .head-mark {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: var(--gold);
        position: relative;
      }
      .head-mark::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 11px;
        height: 2.5px;
        background: var(--navy);
        border-radius: 1px;
        box-shadow:
          0 4px 0 var(--navy),
          0 8px 0 var(--navy);
      }
      .head-mark::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 2.5px;
        height: 13px;
        background: var(--navy);
        border-radius: 1px;
      }
      .head-word {
        font-family: "Cormorant Garamond", serif;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        letter-spacing: 1px;
      }

      /* MESSAGES — scrollable middle layer */
      .chat-msgs {
        position: relative;
        z-index: 5;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        scroll-behavior: smooth;
        /* Fade out at top */
        -webkit-mask-image: linear-gradient(
          180deg,
          transparent 0%,
          black 8%,
          black 100%
        );
        mask-image: linear-gradient(
          180deg,
          transparent 0%,
          black 8%,
          black 100%
        );
      }
      .chat-msgs::-webkit-scrollbar {
        width: 0;
      }

      /* Property info — sits above chips */
      .prop-info {
        margin-top: auto;
        padding-bottom: 8px;
      }
      .prop-name {
        font-family: "Cormorant Garamond", serif;
        font-size: 28px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.3px;
        line-height: 1.2;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
      }
      .prop-meta {
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 5px;
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 16px;
      }
      .online-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
        flex-shrink: 0;
      }

      /* Quick chips */
      .chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .chips::-webkit-scrollbar {
        display: none;
      }
      .chip {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 9px 16px;
        border-radius: 22px;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        font-family: "Outfit", sans-serif;
        transition: all 0.15s;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .chip:hover {
        border-color: var(--gold);
        color: var(--gold);
        background: rgba(200, 168, 75, 0.15);
      }

      /* Message bubbles */
      .msg {
        display: flex;
        gap: 8px;
        max-width: 86%;
        animation: mIn 0.2s ease;
      }
      @keyframes mIn {
        from {
          opacity: 0;
          transform: translateY(5px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .msg.bot {
        align-self: flex-start;
      }
      .msg.user {
        flex-direction: row-reverse;
        align-self: flex-end;
      }
      .av {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .av.bot {
        background: var(--gold);
        position: relative;
      }
      .av.bot::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 11px;
        height: 2.5px;
        background: var(--navy);
        border-radius: 1px;
        box-shadow:
          0 4px 0 var(--navy),
          0 8px 0 var(--navy);
      }
      .av.bot::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 2.5px;
        height: 13px;
        background: var(--navy);
        border-radius: 1px;
      }
      .av.user {
        background: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.6);
        font-size: 10px;
        font-weight: 600;
        backdrop-filter: blur(8px);
      }
      .bbl {
        padding: 12px 15px;
        border-radius: 18px;
        font-size: 14px;
        line-height: 1.65;
      }
      .bot .bbl {
        background: rgba(255, 255, 255, 0.94);
        border-bottom-left-radius: 4px;
        color: var(--navy);
      }
      .user .bbl {
        background: rgba(10, 22, 40, 0.85);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        border-bottom-right-radius: 4px;
      }
      .msg-t {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 4px;
      }
      .bot .msg-t {
        text-align: left;
      }
      .user .msg-t {
        text-align: right;
      }
      .human-support-link {
        display: inline-block;
        margin: 7px 0 1px 2px;
        color: var(--navy);
        font-size: 12px;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        background: #fff;
        padding: 8px;
        border-radius: 8px;
      }

      /* Place cards */
      .places-wrap {
        align-self: flex-start;
        width: 100%;
        max-width: 90%;
        animation: mIn 0.2s ease;
      }
      .places-lbl {
        font-size: 12.5px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 8px;
        padding-left: 2px;
      }
      .places-list {
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      .place-card {
        background: rgba(255, 255, 255, 0.93);
        border-radius: 13px;
        padding: 11px 13px;
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        transition: all 0.15s;
      }
      .place-card:hover {
        background: #fff;
      }
      .p-ico {
        font-size: 20px;
        flex-shrink: 0;
      }
      .p-info {
        flex: 1;
        min-width: 0;
      }
      .p-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--navy);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .p-meta {
        font-size: 11px;
        color: var(--muted);
        margin-top: 1px;
      }
      .p-stars {
        font-size: 11px;
        color: var(--gold);
        font-weight: 600;
        margin-top: 1px;
      }
      .p-arr {
        color: var(--muted);
        font-size: 13px;
        flex-shrink: 0;
      }

      /* Typing */
      .typing {
        align-self: flex-start;
        display: flex;
        gap: 8px;
      }
      .t-bbl {
        background: rgba(255, 255, 255, 0.94);
        border-radius: 18px;
        border-bottom-left-radius: 4px;
        padding: 13px 18px;
        display: flex;
        gap: 5px;
        align-items: center;
      }
      .t-bbl span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
        animation: tb 1.2s infinite;
      }
      .t-bbl span:nth-child(2) {
        animation-delay: 0.15s;
      }
      .t-bbl span:nth-child(3) {
        animation-delay: 0.3s;
      }
      @keyframes tb {
        0%,
        60%,
        100% {
          transform: translateY(0);
          opacity: 0.3;
        }
        30% {
          transform: translateY(-5px);
          opacity: 1;
        }
      }

      /* HELP button — pinned over image above input */
      .help-btn-wrap {
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: flex-end;
        padding: 0 18px 10px;
        flex-shrink: 0;
      }
      .help-btn {
        background: var(--gold);
        border: none;
        color: var(--navy);
        padding: 10px 20px;
        border-radius: 10px;
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 12.5px;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(200, 168, 75, 0.4);
        transition: all 0.2s;
      }
      .help-btn:hover {
        background: var(--gold2);
      }

      /* INPUT BAR — pinned bottom */
      .chat-input {
        position: relative;
        z-index: 10;
        flex-shrink: 0;
        background: rgba(10, 22, 40, 0.9);
        backdrop-filter: blur(24px);
        padding: 10px 14px 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
      }
      .privacy {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.25);
        text-align: center;
        margin-bottom: 8px;
        line-height: 1.5;
      }
      .input-row {
        display: flex;
        gap: 8px;
        align-items: flex-end;
      }
      .input-box {
        flex: 1;
        background: rgba(255, 255, 255, 0.1);
        border: 1.5px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        display: flex;
        align-items: flex-end;
        padding: 4px 8px 4px 14px;
        transition: border-color 0.2s;
      }
      .input-box:focus-within {
        border-color: rgba(200, 168, 75, 0.6);
      }
      textarea#ti {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        font-family: "Outfit", sans-serif;
        font-size: 14px;
        resize: none;
        min-height: 38px;
        max-height: 100px;
        padding: 8px 4px;
        line-height: 1.5;
      }
      textarea#ti::placeholder {
        /* color: rgba(255, 255, 255, 0.3); */
        color: rgba(255, 255, 255, 0.65);
      }
      .mic-btn {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        transition: color 0.2s;
        margin-bottom: 2px;
      }
      .mic-btn:hover {
        color: rgba(255, 255, 255, 0.8);
      }
      .mic-btn.rec {
        color: #ef4444;
        animation: pulse 1s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }
      .send {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: var(--gold);
        border: none;
        color: var(--navy);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s;
        box-shadow: 0 4px 14px rgba(200, 168, 75, 0.35);
      }
      .send:hover {
        background: var(--gold2);
        transform: translateY(-1px);
      }
      .send:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
      }
      .send svg {
        width: 17px;
        height: 17px;
      }
      .err {
        background: rgba(239, 68, 68, 0.85);
        color: #fff;
        padding: 8px 16px;
        font-size: 12px;
        text-align: center;
        display: none;
        flex-shrink: 0;
        position: relative;
        z-index: 10;
      }
      .err.show {
        display: block;
      }

      /* =========================================================
   SIGNUP - 4 STEP FORM
========================================================= */

#signupScreen {
  min-height: 100dvh;
  box-sizing: border-box;
}


/* =========================================================
   PROGRESS INDICATOR
========================================================= */

#signupScreen .signup-progress {
  width: 100%;
  max-width: 520px;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  margin: 8px auto 20px;

  box-sizing: border-box;
}


#signupScreen .signup-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 52px;

  opacity: 0.4;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


#signupScreen .signup-progress-step span {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.35);

  font-size: 12px;
  font-weight: 600;

  box-sizing: border-box;
}


#signupScreen .signup-progress-step small {
  margin-top: 5px;

  font-size: 10px;

  white-space: nowrap;
}


#signupScreen .signup-progress-step.active {
  opacity: 1;

  transform: translateY(-1px);
}


#signupScreen .signup-progress-step.completed {
  opacity: 0.8;
}


#signupScreen .signup-progress-step.completed span {
  background: rgba(255, 255, 255, 0.15);
}


#signupScreen .signup-progress-line {
  flex: 1;

  max-width: 55px;

  height: 1px;

  margin-top: 14px;

  background: rgba(255, 255, 255, 0.25);
}


/* =========================================================
   FORM
========================================================= */

#signupScreen #signupForm {
  width: 100%;
  max-width: 520px;

  margin: 0 auto;

  box-sizing: border-box;
}


#signupScreen #signupForm > div[hidden] {
  display: none !important;
}


#signupScreen #signupForm > div:not([hidden]) {
  width: 100%;

  box-sizing: border-box;
}


/* =========================================================
   FIELD
========================================================= */

#signupScreen #signupForm .field {
  width: 100%;

  box-sizing: border-box;

  margin-bottom: 14px;
}


#signupScreen #signupForm input,
#signupScreen #signupForm select {
  width: 100%;
  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;
}


/* =========================================================
   SELECT
========================================================= */

#signupScreen #signupForm select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 40px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      currentColor 50%
    ),
    linear-gradient(
      135deg,
      currentColor 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;

  background-size:
    6px 6px,
    6px 6px;

  background-repeat: no-repeat;
}


#signupScreen #signupForm select option {
  background: #1a1a1a;
  color: #fff;
}


/* =========================================================
   MOBILE NUMBER
========================================================= */

#signupScreen .mobile-row {
  display: flex;

  width: 100%;

  gap: 8px;

  box-sizing: border-box;
}


#signupScreen .mobile-country-code {
  flex: 0 0 85px;

  width: 85px !important;
}


#signupScreen .mobile-number {
  flex: 1 1 auto;

  width: auto !important;

  min-width: 0;
}


/* =========================================================
   BACK BUTTON
========================================================= */

#signupScreen .signup-back-btn {
  margin-top: 8px;

  opacity: 0.85;
}


/* =========================================================
   ERROR
========================================================= */

#signupScreen .login-err {
  width: 100%;

  box-sizing: border-box;

  margin-bottom: 10px;
}


/* =========================================================
   DIALOG
========================================================= */

#signupScreen .signup-dialog {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 20px;

  box-sizing: border-box;

  background: rgba(0, 0, 0, 0.65);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


#signupScreen .signup-dialog[hidden] {
  display: none !important;
}


#signupScreen .signup-dialog-box {
  width: 100%;
  max-width: 400px;

  padding: 28px 24px;

  box-sizing: border-box;

  border-radius: 16px;

  background: #fff;

  color: #111;

  text-align: center;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35);
}


#signupScreen .signup-dialog-box h2 {
  margin: 0 0 10px;

  font-size: 21px;

  line-height: 1.3;
}


#signupScreen .signup-dialog-box p {
  margin: 0 0 22px;

  color: #555;

  font-size: 14px;

  line-height: 1.6;
}


#signupScreen .signup-dialog-icon {
  width: 48px;
  height: 48px;

  margin: 0 auto 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 24px;
  font-weight: 700;
}


#signupScreen .signup-dialog-icon.success {
  background: #e8f7ed;
  color: #198754;
}


#signupScreen .signup-dialog-icon.error {
  background: #fdecec;
  color: #dc3545;
}


#signupScreen .signup-dialog-box .login-btn {
  width: 100%;

  box-sizing: border-box;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

  #signupScreen .signup-progress {
    max-width: 460px;

    margin-bottom: 16px;
  }

  #signupScreen #signupForm {
    max-width: 460px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

  #signupScreen .signup-progress {
    margin-top: 4px;
    margin-bottom: 16px;

    padding: 0 4px;
  }


  #signupScreen .signup-progress-step {
    min-width: 45px;
  }


  #signupScreen .signup-progress-step span {
    width: 26px;
    height: 26px;

    font-size: 11px;
  }


  #signupScreen .signup-progress-step small {
    font-size: 9px;
  }


  #signupScreen .signup-progress-line {
    max-width: 35px;

    margin-top: 13px;
  }


  #signupScreen #signupForm .field {
    margin-bottom: 12px;
  }


  #signupScreen #signupForm input,
  #signupScreen #signupForm select {
    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;
  }


  #signupScreen .mobile-row {
    gap: 6px;
  }


  #signupScreen .mobile-country-code {
    flex: 0 0 78px;

    width: 78px !important;
  }


  #signupScreen .mobile-number {
    width: 0 !important;

    flex: 1 1 0;
  }


  #signupScreen .signup-dialog {
    padding: 16px;
  }


  #signupScreen .signup-dialog-box {
    padding: 24px 18px;

    border-radius: 14px;
  }


  #signupScreen .signup-dialog-box h2 {
    font-size: 19px;
  }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  #signupScreen .signup-progress-step {
    min-width: 40px;
  }


  #signupScreen .signup-progress-step small {
    font-size: 8px;
  }


  #signupScreen .signup-progress-line {
    max-width: 25px;
  }


  #signupScreen #signupForm .field {
    margin-bottom: 10px;
  }


  #signupScreen #signupForm input,
  #signupScreen #signupForm select {
    font-size: 14px;
  }
}

/* =========================================================
   SIGNUP PAGE - RESPONSIVE FIXES
========================================================= */

#signupScreen {
  width: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}


/* =========================================================
   FORM AREA
   Allows the complete form to scroll on small screens
========================================================= */

#signupScreen #signupForm {
  width: 100%;
  max-width: 520px;

  margin: 0 auto;

  box-sizing: border-box;

  min-height: 0;
}


/*
 * Hidden steps must remain hidden.
 */

#signupScreen #signupForm > div[hidden] {
  display: none !important;
}


/*
 * Active step.
 */

#signupScreen #signupForm > div:not([hidden]) {
  width: 100%;
  max-width: 100%;

  box-sizing: border-box;
}


/* =========================================================
   INPUTS
========================================================= */

#signupScreen #signupForm input {
  width: 100%;
  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;

  color: #ffffff;

  background-color: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.25);

  outline: none;
}


/*
 * Placeholder visibility
 */

#signupScreen #signupForm input::placeholder {
  color: rgba(255, 255, 255, 0.65);

  opacity: 1;
}


/*
 * Focus
 */

#signupScreen #signupForm input:focus {
  border-color: rgba(255, 255, 255, 0.55);

  background-color: rgba(255, 255, 255, 0.1);
}


/* =========================================================
   SELECT / DROPDOWN
========================================================= */

#signupScreen #signupForm select {
  width: 100%;
  max-width: 100%;

  min-width: 0;

  min-height: 46px;

  box-sizing: border-box;

  padding: 11px 42px 11px 14px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 8px;

  outline: none;

  /*
   * Dark transparent background.
   */

  background-color: rgba(255, 255, 255, 0.08);

  /*
   * White text.
   */

  color: #ffffff;

  font-family: inherit;

  font-size: 15px;

  line-height: 1.4;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /*
   * Dropdown arrow.
   */

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      rgba(255, 255, 255, 0.8) 50%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.8) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;

  background-size:
    6px 6px,
    6px 6px;

  background-repeat: no-repeat;
}


/*
 * Select placeholder.
 */

#signupScreen #signupForm select:invalid {
  color: rgba(255, 255, 255, 0.65);
}


/*
 * Dropdown options.
 */

#signupScreen #signupForm select option {
  background-color: #1c1c1c;

  color: #ffffff;

  padding: 10px;
}


/*
 * Select focus.
 */

#signupScreen #signupForm select:focus {
  border-color: rgba(255, 255, 255, 0.6);

  background-color: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   DATE INPUT
========================================================= */

#signupScreen #signupForm input[type="date"] {
  color-scheme: dark;
}


/* =========================================================
   FILE INPUT
========================================================= */

#signupScreen #signupForm input[type="file"] {
  color: rgba(255, 255, 255, 0.75);

  cursor: pointer;
}


/* =========================================================
   MOBILE NUMBER
========================================================= */

#signupScreen .mobile-row {
  display: flex;

  width: 100%;
  max-width: 100%;

  gap: 8px;

  box-sizing: border-box;
}


#signupScreen .mobile-country-code {
  flex: 0 0 85px;

  width: 85px !important;

  min-width: 0;
}


#signupScreen .mobile-number {
  flex: 1 1 auto;

  width: auto !important;

  min-width: 0;
}


/* =========================================================
   STEP INDICATOR
========================================================= */

#signupScreen .signup-progress {
  width: 100%;
  max-width: 520px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  margin: 10px auto 20px;

  box-sizing: border-box;

  /*
   * Prevent the indicator from being clipped.
   */

  padding: 0 4px;
}


/*
 * Individual step
 */

#signupScreen .signup-progress-step {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  min-width: 52px;

  color: rgba(255, 255, 255, 0.75);

  opacity: 0.85;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}


/*
 * Number circle
 */

#signupScreen .signup-progress-step span {
  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.5);

  background-color: rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.9);

  font-size: 12px;

  font-weight: 600;
}


/*
 * Step text
 */

#signupScreen .signup-progress-step small {
  display: block;

  margin-top: 6px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 10px;

  font-weight: 500;

  line-height: 1;

  white-space: nowrap;
}


/*
 * Current step
 */

#signupScreen .signup-progress-step.active {
  opacity: 1;

  color: #ffffff;
}


#signupScreen .signup-progress-step.active span {
  border-color: rgba(255, 255, 255, 0.9);

  background-color: rgba(255, 255, 255, 0.2);

  color: #ffffff;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.08);
}


#signupScreen .signup-progress-step.active small {
  color: #ffffff;

  font-weight: 600;
}


/*
 * Completed steps
 */

#signupScreen .signup-progress-step.completed {
  opacity: 1;
}


#signupScreen .signup-progress-step.completed span {
  background-color: rgba(255, 255, 255, 0.15);

  border-color: rgba(255, 255, 255, 0.65);

  color: #ffffff;
}


#signupScreen .signup-progress-step.completed small {
  color: rgba(255, 255, 255, 0.9);
}


/*
 * Connecting lines
 */

#signupScreen .signup-progress-line {
  flex: 1;

  max-width: 60px;

  height: 1px;

  margin-top: 15px;

  background-color: rgba(255, 255, 255, 0.4);
}


/* =========================================================
   FIELD SPACING
========================================================= */

#signupScreen #signupForm .field {
  width: 100%;

  margin-bottom: 14px;

  box-sizing: border-box;
}


/* =========================================================
   MOBILE / SMALL SCREEN FORM SCROLL
========================================================= */

@media (max-width: 600px) {

  /*
   * Allow the whole page to scroll vertically.
   *
   * This is important because the browser viewport can be
   * smaller than the complete signup form.
   */

  #signupScreen {
    min-height: 100dvh;

    height: auto;

    overflow-x: hidden;

    overflow-y: auto;
  }


  /*
   * Do NOT lock login-body to 100vh.
   */

  #signupScreen .login-body {
    min-height: 100dvh;

    height: auto;

    box-sizing: border-box;

    padding-bottom: 30px;
  }


  /*
   * Form can now extend naturally.
   */

  #signupScreen #signupForm {
    width: 100%;

    max-width: 100%;

    padding-bottom: 10px;
  }


  /*
   * Make sure the active step is never clipped.
   */

  #signupScreen #signupForm > div:not([hidden]) {
    overflow: visible;

    height: auto;

    min-height: 0;
  }


  /*
   * Footer links remain visible after scrolling.
   */

  #signupScreen .login-help {
    margin-top: 10px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

  #signupScreen .login-body {
    padding-left: 16px;
    padding-right: 16px;
  }


  /*
   * Progress indicator
   */

  #signupScreen .signup-progress {
    margin-top: 8px;

    margin-bottom: 16px;

    padding-left: 0;
    padding-right: 0;
  }


  #signupScreen .signup-progress-step {
    min-width: 45px;
  }


  #signupScreen .signup-progress-step span {
    width: 28px;
    height: 28px;

    font-size: 11px;
  }


  #signupScreen .signup-progress-step small {
    font-size: 9px;

    margin-top: 5px;
  }


  #signupScreen .signup-progress-line {
    max-width: 38px;

    margin-top: 14px;
  }


  /*
   * Inputs
   */

  #signupScreen #signupForm input,
  #signupScreen #signupForm select {
    font-size: 14px;

    min-height: 44px;
  }


  /*
   * Mobile number
   */

  #signupScreen .mobile-row {
    gap: 6px;
  }


  #signupScreen .mobile-country-code {
    flex: 0 0 78px;

    width: 78px !important;
  }


  #signupScreen .mobile-number {
    flex: 1 1 0;

    width: 0 !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  #signupScreen .login-body {
    padding-left: 12px;
    padding-right: 12px;
  }


  /*
   * Keep progress labels readable.
   */

  #signupScreen .signup-progress-step {
    min-width: 40px;
  }


  #signupScreen .signup-progress-step span {
    width: 26px;
    height: 26px;
  }


  #signupScreen .signup-progress-step small {
    font-size: 8px;
  }


  #signupScreen .signup-progress-line {
    max-width: 25px;
  }


  /*
   * Smaller fields.
   */

  #signupScreen #signupForm input,
  #signupScreen #signupForm select {
    font-size: 13px;
  }


  #signupScreen .mobile-country-code {
    flex: 0 0 70px;

    width: 70px !important;
  }
}


/* =========================================================
   DIALOGS
========================================================= */

#signupScreen .signup-dialog {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 20px;

  box-sizing: border-box;

  background: rgba(0, 0, 0, 0.7);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


#signupScreen .signup-dialog[hidden] {
  display: none !important;
}


#signupScreen .signup-dialog-box {
  width: 100%;
  max-width: 400px;

  padding: 28px 24px;

  box-sizing: border-box;

  border-radius: 16px;

  background: #ffffff;

  color: #111111;

  text-align: center;

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


#signupScreen .signup-dialog-box h2 {
  margin: 0 0 12px;

  color: #111111;

  font-size: 21px;

  line-height: 1.3;
}


#signupScreen .signup-dialog-box p {
  margin: 0 0 24px;

  color: #555555;

  font-size: 14px;

  line-height: 1.6;
}


#signupScreen .signup-dialog-box .login-btn {
  width: 100%;

  box-sizing: border-box;
}


/* =========================================================
   DIALOG MOBILE
========================================================= */

@media (max-width: 480px) {

  #signupScreen .signup-dialog {
    padding: 16px;
  }


  #signupScreen .signup-dialog-box {
    padding: 24px 18px;

    border-radius: 14px;
  }


  #signupScreen .signup-dialog-box h2 {
    font-size: 19px;
  }


  #signupScreen .signup-dialog-box p {
    font-size: 14px;
  }
}

/* =========================================================
   SIGNUP PAGE - FINAL OVERFLOW FIX
   This intentionally overrides the existing login layout
   only for the signup page.
========================================================= */

/* ---------------------------------------------------------
   PAGE
--------------------------------------------------------- */

html:has(#signupScreen),
body:has(#signupScreen) {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}


/* ---------------------------------------------------------
   SCREEN
--------------------------------------------------------- */

#signupScreen {
  position: relative;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  height: auto !important;

  overflow-x: hidden !important;
  overflow-y: visible !important;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   BACKGROUND
   Keep backgrounds fixed while page scrolls.
--------------------------------------------------------- */

#signupScreen .login-bg,
#signupScreen .login-grad {
  position: fixed;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* ---------------------------------------------------------
   LOGIN BODY
--------------------------------------------------------- */

#signupScreen .login-body {
  position: relative;

  width: 100%;
  max-width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  height: auto !important;

  box-sizing: border-box;

  overflow: visible !important;

  /*
   * Don't use flex: 1 here.
   */
  flex: none !important;
}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

#signupScreen #signupForm {
  position: relative;

  display: block !important;

  width: 100%;
  max-width: 520px;

  height: auto !important;
  min-height: 0 !important;

  margin-left: auto;
  margin-right: auto;

  overflow: visible !important;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   STEPS
--------------------------------------------------------- */

#signupScreen #signupStep1,
#signupScreen #signupStep2,
#signupScreen #signupStep3,
#signupScreen #signupStep4 {
  position: relative;

  width: 100%;
  max-width: 100%;

  height: auto !important;
  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  box-sizing: border-box;
}


/* Hidden steps */

#signupScreen #signupStep1[hidden],
#signupScreen #signupStep2[hidden],
#signupScreen #signupStep3[hidden],
#signupScreen #signupStep4[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

#signupScreen #signupForm input,
#signupScreen #signupForm select {
  width: 100%;
  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   MOBILE PHONE
--------------------------------------------------------- */

#signupScreen .mobile-row {
  display: flex;

  width: 100%;
  max-width: 100%;

  gap: 8px;

  box-sizing: border-box;
}


#signupScreen .mobile-country-code {
  flex: 0 0 82px;

  width: 82px !important;

  min-width: 0;
}


#signupScreen .mobile-number {
  flex: 1 1 0;

  width: 0 !important;

  min-width: 0;
}


/* ---------------------------------------------------------
   FOOTER LINKS
--------------------------------------------------------- */

#signupScreen .login-help {
  position: relative;

  width: 100%;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   PAGE FOOTER
--------------------------------------------------------- */

#signupScreen .login-foot {
  position: relative !important;

  width: 100%;

  box-sizing: border-box;

  margin-top: 20px;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 601px) {

  #signupScreen .login-body {
    padding-bottom: 30px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  /*
   * CRITICAL:
   * Allow the document itself to scroll.
   */

  html:has(#signupScreen),
  body:has(#signupScreen) {
    height: auto !important;

    min-height: 100% !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }


  #signupScreen {
    height: auto !important;

    min-height: 100dvh !important;

    overflow: visible !important;
  }


  #signupScreen .login-body {
    height: auto !important;

    min-height: 100dvh !important;

    max-height: none !important;

    overflow: visible !important;

    padding-bottom: 30px;
  }


  #signupScreen #signupForm {
    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

    padding-bottom: 5px;
  }


  #signupScreen #signupStep1,
  #signupScreen #signupStep2,
  #signupScreen #signupStep3,
  #signupScreen #signupStep4 {
    height: auto !important;

    max-height: none !important;

    overflow: visible !important;
  }


  /*
   * Make sure fields aren't constrained by an
   * inherited flex height.
   */

  #signupScreen #signupForm .field {
    height: auto;

    min-height: 0;
  }


  /*
   * Footer must come after the form.
   */

  #signupScreen .login-help {
    margin-top: 12px;
  }


  #signupScreen .login-foot {
    margin-top: 10px;

    padding-bottom: 20px;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  #signupScreen .login-body {
    padding-left: 16px;
    padding-right: 16px;
  }


  #signupScreen #signupForm {
    max-width: none;
  }


  #signupScreen #signupForm .field {
    margin-bottom: 12px;
  }


  #signupScreen #signupForm input,
  #signupScreen #signupForm select {
    min-height: 44px;
  }


  #signupScreen .mobile-row {
    gap: 6px;
  }


  #signupScreen .mobile-country-code {
    flex: 0 0 78px;

    width: 78px !important;
  }


  #signupScreen .mobile-number {
    flex: 1 1 0;

    width: 0 !important;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

  #signupScreen .login-body {
    padding-left: 12px;
    padding-right: 12px;
  }


  #signupScreen #signupForm .field {
    margin-bottom: 10px;
  }


  #signupScreen #signupForm input,
  #signupScreen #signupForm select {
    font-size: 14px;
  }
}

/* Upload document */
#document {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--body);
  font-size: 14px;
  cursor: pointer;
}

/* Choose File button */
#document::file-selector-button {
  margin-right: 12px;
  padding: 10px 16px;

  border: 0;
  border-radius: 7px;

  background: var(--gold);
  color: var(--navy);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

#document::file-selector-button:hover {
  background: var(--gold2);
}

#document::file-selector-button:active {
  transform: translateY(1px);
}

/* Chrome / Edge */
#document::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 10px 16px;

  border: 0;
  border-radius: 7px;

  background: var(--gold);
  color: var(--navy);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

#document::-webkit-file-upload-button:hover {
  background: var(--gold2);
}

/* Mobile */
@media (max-width: 480px) {
  #document {
    font-size: 13px;
    padding: 8px;
  }

  #document::file-selector-button,
  #document::-webkit-file-upload-button {
    padding: 9px 13px;
    font-size: 13px;
  }
}