/* ══ WRAPPER ══ */
    .signup-wrapper{
        min-height:100vh;
        display:grid;
        grid-template-columns:1fr 1fr;
        padding: 15px;
    }

    /* ══ LEFT PANEL ══ */
    .left-panel{
      background:#fff;
      padding:10% 44px;
      display:flex;
      flex-direction:column;
      position:relative;
      overflow:hidden;
      height: fit-content;
    }
    .left-panel::after{
      content:'';
      position:absolute;
      bottom:0; right:0;
      width:220px; height:220px;
      background:var(--orange-light);
      border-radius:50% 0 0 0;
      z-index:0;
      opacity:.6;
    }

    /* Brand */
    .brand{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
    .brand-icon{width:48px;height:48px;background:var(--orange);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;}
    .brand-name{font-family:'Poppins', sans-serif;font-size:28px;color:var(--orange);line-height:1;}
    .brand-name span{color:var(--dark);}
    .brand-name sub{font-family:'Poppins',sans-serif;font-size:10px;color:var(--muted);font-weight:400;}
    .brand-tagline{font-size:12px;color:var(--muted);margin-bottom:36px;padding-left:58px;}

    /* Welcome heading */
    .welcome-heading{font-family:'Poppins', sans-serif;font-size:20px;color:var(--dark);margin-bottom:6px;line-height:1.2;position:relative;z-index:1;}
    .welcome-heading span{color:var(--orange);}
    .welcome-divider{width:40px;height:3px;background:var(--orange);border-radius:2px;margin:14px 0 28px;}

    /* Feature list */
    .feature-list{display:flex;flex-direction:column;gap:22px;position:relative;z-index:1;}
    .feature-item{display:flex;align-items:flex-start;gap:14px;}
    .feature-icon{width:44px;height:44px;background:var(--orange-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--orange);flex-shrink:0;}
    .feature-text h6{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:2px;}
    .feature-text p{font-size:12px;color:var(--muted);line-height:1.5;}

    /* House image area */
    .house-img-wrap{
      position:relative;
      z-index:1;
      margin-top:32px;
      border-radius:18px;
      overflow:hidden;
      flex:1;
      min-height:220px;
      background:linear-gradient(135deg,#e8f0fe,#fce4d6);
      display:flex;
      align-items:flex-end;
    }
    .house-img-wrap img{width:100%;height:auto;object-fit:cover;display:block;}

    /* Stats overlay */
    .stats-overlay{
      position:absolute;
      bottom:0; left:0; right:0;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(10px);
      padding:16px 20px;
      display:flex;
      justify-content:space-around;
      border-top:1px solid rgba(0,0,0,.06);
    }
    .stat-item{text-align:center;}
    .stat-item .num{font-size:20px;font-weight:800;color:var(--orange);}
    .stat-item .ico{font-size:18px;color:var(--orange);display:block;margin-bottom:2px;}
    .stat-item .lbl{font-size:10px;color:var(--muted);font-weight:500;}

    /* ══ RIGHT PANEL ══ */
    .right-panel{
      background:var(--bg);
      padding:40px 44px;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
    }

    /* Page title */
    .page-title{font-family:'Poppins', sans-serif;font-size:22px;color:var(--dark);margin-bottom:4px;}
    .page-title span{color:var(--orange);}
    .page-subtitle{font-size:13px;color:var(--muted);margin-bottom:28px;}

    /* ── ROLE TABS ── */
    .role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px;}
    .role-tab{
      border:2px solid var(--border);
      border-radius:12px;
      padding:14px 10px 12px;
      text-align:center;
      cursor:pointer;
      background:#fff;
      transition:all .22s ease;
      position:relative;
      overflow:hidden;
    }
    .role-tab::before{
      content:'';
      position:absolute;
      inset:0;
      background:var(--orange-light);
      opacity:0;
      transition:opacity .22s;
    }
    .role-tab:hover::before{opacity:.5;}
    .role-tab.active{
      border-color:var(--orange);
      background:var(--orange-light);
      box-shadow:0 4px 16px rgba(244,121,32,.15);
    }
    .role-tab.active::before{opacity:1;}
    .role-tab-icon{
      position:relative;z-index:1;
      width:40px;height:40px;
      border-radius:10px;
      background:var(--bg);
      margin:0 auto 8px;
      display:flex;align-items:center;justify-content:center;
      font-size:18px;
      color:var(--muted);
      transition:.22s;
    }
    .role-tab.active .role-tab-icon{background:var(--orange);color:#fff;}
    .role-tab-name{position:relative;z-index:1;font-size:13px;font-weight:700;color:var(--dark);display:block;}
    .role-tab-sub{position:relative;z-index:1;font-size:10px;color:var(--muted);display:block;margin-top:2px;}
    .role-tab.active .role-tab-name{color:var(--orange);}
    .role-tab .active-dot{
      position:absolute;top:8px;right:8px;
      width:8px;height:8px;border-radius:50%;
      background:var(--orange);
      display:none;
      z-index:2;
    }
    .role-tab.active .active-dot{display:block;}

    /* ── FORM ── */
    .form-wrap{display:flex;flex-direction:column;gap:0;}

    /* Dynamic fields slide in */
    .form-field{margin-bottom:16px;animation:slideIn .25s ease both;}
    @keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

    .field-label{font-size:12px;font-weight:600;color:var(--dark);margin-bottom:6px;display:flex;align-items:center;gap:4px;}
    .field-label .req{color:var(--orange);}

    .input-wrap{position:relative;}
    .input-wrap .field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:#bbb;pointer-events:none;}
    .input-wrap input,
    .input-wrap select,
    .input-wrap textarea{
      width:100%;
      border:1.5px solid var(--border);
      border-radius:10px;
      padding:11px 14px 11px 40px;
      font-size:13px;
      font-family:'Poppins',sans-serif;
      color:var(--text);
      background:#fff;
      outline:none;
      transition:border-color .2s, box-shadow .2s;
      appearance:none;
    }
    .input-wrap textarea{padding-top:12px;resize:vertical;min-height:80px;}
    .input-wrap input:focus,
    .input-wrap select:focus,
    .input-wrap textarea:focus{
      border-color:var(--orange);
      box-shadow:0 0 0 3px rgba(244,121,32,.1);
    }
    .input-wrap input.error{border-color:var(--red);}
    .input-wrap .toggle-pw{
      position:absolute;right:14px;top:50%;transform:translateY(-50%);
      background:none;border:none;cursor:pointer;color:#bbb;font-size:14px;
      transition:.2s;
    }
    .input-wrap .toggle-pw:hover{color:var(--orange);}

    /* Phone field */
    .phone-wrap{display:flex;gap:8px;}
    .phone-code{
      flex-shrink:0;
      width:90px;
      border:1.5px solid var(--border);
      border-radius:10px;
      padding:11px 10px;
      font-size:13px;
      font-family:'Poppins',sans-serif;
      background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;
      appearance:none;
      outline:none;
      transition:border-color .2s,box-shadow .2s;
      cursor:pointer;
    }
    .phone-code:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,121,32,.1);}
    .phone-input-wrap{flex:1;position:relative;}
    .phone-input-wrap .field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:#bbb;}
    .phone-input-wrap input{width:100%;padding-left:40px;}

    /* Two-col row */
    .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

    /* Password strength */
    .pw-strength{margin-top:8px;}
    .pw-bar{height:4px;border-radius:2px;background:var(--border);position:relative;overflow:hidden;}
    .pw-bar-fill{height:100%;width:0;border-radius:2px;transition:width .3s,background .3s;}
    .pw-req-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:10px;background:var(--orange-light);border-radius:10px;padding:12px 14px;}
    .pw-req{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;}
    .pw-req i{font-size:11px;color:#bbb;transition:.2s;}
    .pw-req.met i{color:var(--green);}
    .pw-req.met{color:var(--dark);}

    /* Terms */
    .terms-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px;}
    .terms-row input[type=checkbox]{
      width:16px;height:16px;
      accent-color:var(--orange);
      margin-top:2px;flex-shrink:0;cursor:pointer;
    }
    .terms-row label{font-size:12px;color:var(--muted);line-height:1.55;cursor:pointer;}
    .terms-row label a{color:var(--orange);text-decoration:none;font-weight:600;}
    .terms-row label a:hover{text-decoration:underline;}

    /* Submit */
    .btn-create{
      width:100%;
      background:var(--orange);
      color:#fff;
      border:none;
      border-radius:12px;
      padding:14px;
      font-size:15px;
      font-weight:700;
      font-family:'Poppins',sans-serif;
      cursor:pointer;
      display:flex;align-items:center;justify-content:center;gap:10px;
      transition:.22s;
      box-shadow:0 4px 16px rgba(244,121,32,.35);
      margin-bottom:14px;
    }
    .btn-create:hover{background:var(--orange-dark);transform:translateY(-1px);box-shadow:0 6px 22px rgba(244,121,32,.45);}
    .btn-create:active{transform:translateY(0);}

    /* Already have account */
    .login-link{text-align:center;font-size:13px;color:var(--muted);margin-bottom:18px;}
    .login-link a{color:var(--orange);font-weight:700;text-decoration:none;}
    .login-link a:hover{text-decoration:underline;}

    /* Divider */
    .or-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
    .or-divider span{font-size:12px;color:var(--muted);white-space:nowrap;}
    .or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--border);}

    /* Social buttons */
    .social-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px;}
    .social-btn{
      border:1.5px solid var(--border);
      border-radius:10px;
      padding:10px 8px;
      background:#fff;
      display:flex;align-items:center;justify-content:center;gap:7px;
      font-size:12px;font-weight:600;color:var(--dark);
      cursor:pointer;transition:.2s;
      font-family:'Poppins',sans-serif;
    }
    .social-btn:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-light);}
    .social-btn img{width:16px;height:16px;}

    /* Bottom trust badges */
    .trust-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
    .trust-badge{
      background:#fff;
      border:1px solid var(--border);
      border-radius:10px;
      padding:12px 10px;
      text-align:center;
    }
    .trust-badge i{font-size:18px;color:var(--orange);display:block;margin-bottom:6px;}
    .trust-badge .tb-title{font-size:11px;font-weight:700;color:var(--dark);display:block;}
    .trust-badge .tb-sub{font-size:10px;color:var(--muted);line-height:1.4;display:block;margin-top:2px;}

    /* ── RESPONSIVE ── */
    @media(max-width:991px){
      .signup-wrapper{grid-template-columns:1fr;}
      .left-panel{display:none;}
    }
    @media(max-width:576px){
      .right-panel{padding:28px 20px;}
      .field-row{grid-template-columns:1fr;}
      .social-btns{grid-template-columns:1fr;}
    }

    /* Field visibility animation */
    .field-hidden{display:none;}

    .tab-content { display: none; }
.tab-content.active { display: block; }