/* =========================================================
   JOB BEKU REGISTRATION
========================================================= */

   .jobbeku-register-section {
       background: #f5f8fc;
       padding: 35px 15px 50px;
       min-height: calc(100vh - 135px);
   }

   .jobbeku-register-wrapper {
       max-width: 1150px;
       margin: auto;
       background: #fff;
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 15px 50px rgba(11, 33, 71, .11);
   }


   /* =========================================================
   LEFT PANEL
========================================================= */

   .register-left {
       background: #0b2147;
       color: #fff;
       position: relative;
       overflow: hidden;
   }

   .register-left::before {
       content: "";
       position: absolute;
       width: 380px;
       height: 380px;
       border-radius: 50%;
       background: rgba(255, 189, 0, .07);
       top: -180px;
       right: -160px;
   }

   .register-left::after {
       content: "";
       position: absolute;
       width: 300px;
       height: 300px;
       border-radius: 50%;
       background: rgba(255, 255, 255, .035);
       bottom: -160px;
       left: -150px;
   }

   .register-left-content {
       position: relative;
       z-index: 2;
       padding: 50px 40px;
   }


   /* Badge */

   .register-verified {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       padding: 8px 14px;
       border-radius: 30px;
       background: #ffbd00;
       color: #111;
       font-size: 12px;
       font-weight: 700;
       margin-bottom: 25px;
   }

   .register-verified i {
       font-size: 13px;
   }


   /* Heading */

   .register-left h1 {
       font-size: 39px;
       line-height: 1.13;
       letter-spacing: -1px;
       font-weight: 800;
       margin: 0 0 18px;
   }

   .register-left h1 span {
       color: #ffbd00;
       display: block;
   }


   /* Intro */

   .register-intro {
       color: #cbd7e8;
       font-size: 14px;
       line-height: 1.7;
       max-width: 420px;
       margin-bottom: 30px;
   }


   /* Benefits */

   .register-benefits {
       display: flex;
       flex-direction: column;
       gap: 18px;
   }

   .register-benefit {
       display: flex;
       align-items: center;
       gap: 13px;
   }

   .benefit-icon {
       width: 43px;
       height: 43px;
       min-width: 43px;
       border-radius: 12px;
       background: rgba(255, 189, 0, .12);
       color: #ffbd00;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .register-benefit strong {
       display: block;
       color: #fff;
       font-size: 13px;
       margin-bottom: 2px;
   }

   .register-benefit small {
       display: block;
       color: #9fb0c9;
       font-size: 11px;
       line-height: 1.4;
   }


   /* Location box */

   .register-location-box {
       margin-top: 38px;
       padding: 14px;
       border: 1px solid rgba(255, 255, 255, .12);
       background: rgba(255, 255, 255, .035);
       border-radius: 13px;
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .register-location-box>i {
       color: #ffbd00;
       font-size: 18px;
   }

   .register-location-box strong {
       display: block;
       font-size: 12px;
   }

   .register-location-box span {
       display: block;
       color: #9fb0c9;
       font-size: 10px;
       margin-top: 3px;
       line-height: 1.5;
   }


   /* =========================================================
   RIGHT PANEL
========================================================= */

   .register-right {
       background: #fff;
       padding: 35px 40px;
   }

   .register-card {
       width: 100%;
       max-width: 650px;
       margin: auto;
   }


   /* Header */

   .register-card-header {
       display: flex;
       align-items: center;
       gap: 13px;
       margin-bottom: 22px;
   }

   .register-icon {
       width: 52px;
       height: 52px;
       min-width: 52px;
       border-radius: 14px;
       background: #fff7d7;
       border: 1px solid #ffe28a;
       color: #0b2147;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 21px;
   }

   .register-card-header h2 {
       color: #0b2147;
       font-size: 23px;
       font-weight: 800;
       margin: 0 0 3px;
   }

   .register-card-header p {
       color: #8a95a5;
       font-size: 12px;
       margin: 0;
   }


   /* Alert */

   .register-alert {
       border: 0;
       border-radius: 9px;
       font-size: 12px;
       padding: 9px 12px;
       display: flex;
       align-items: center;
       gap: 8px;
   }


   /* Section Heading */

   .register-section-title {
       display: flex;
       align-items: center;
       gap: 10px;
       padding-bottom: 9px;
       margin-bottom: 10px;
       border-bottom: 1px solid #edf0f4;
   }

   .section-number {
       width: 26px;
       height: 26px;
       border-radius: 8px;
       background: #0b2147;
       color: #ffbd00;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 10px;
       font-weight: 800;
   }

   .register-section-title strong {
       display: block;
       color: #273650;
       font-size: 12px;
       line-height: 1.2;
   }

   .register-section-title small {
       color: #9aa4b2;
       display: block;
       font-size: 10px;
       margin-top: 2px;
   }


   /* Labels */

   .register-label {
       display: block;
       color: #35435a;
       font-size: 11px;
       font-weight: 700;
       margin-bottom: 5px;
   }

   .register-label span {
       color: #e13b3b;
   }


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

   .register-input {
       height: 40px;
       border: 1px solid #dce3ec;
       background: #f9fafc;
       border-radius: 8px;
       display: flex;
       align-items: center;
       transition: .2s ease;
   }

   .register-input:focus-within {
       background: #fff;
       border-color: #0b2147;
       box-shadow: 0 0 0 3px rgba(11, 33, 71, .06);
   }

   .register-input>i {
       width: 36px;
       min-width: 36px;
       text-align: center;
       color: #8c98a8;
       font-size: 12px;
   }

   .register-input input,
   .register-input select {
       flex: 1;
       height: 100%;
       min-width: 0;
       border: 0;
       outline: 0;
       background: transparent;
       color: #29374d;
       font-size: 12px;
       padding: 0 8px 0 0;
   }

   .register-input input::placeholder {
       color: #a2abb8;
   }

   .register-input select {
       cursor: pointer;
   }


   /* Password */

   .register-password-toggle {
       width: 38px;
       min-width: 38px;
       height: 100%;
       border: 0;
       background: transparent;
       color: #8793a3;
       cursor: pointer;
   }

   .register-password-toggle:hover {
       color: #0b2147;
   }


   /* =========================================================
   GENDER
========================================================= */

   .gender-options {
       display: flex;
       gap: 5px;
       height: 40px;
   }

   .gender-option {
       flex: 1;
       cursor: pointer;
       margin: 0;
   }

   .gender-option input {
       display: none;
   }

   .gender-option span {
       height: 40px;
       padding: 0 7px;
       border: 1px solid #dce3ec;
       border-radius: 8px;
       background: #f9fafc;
       color: #667286;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 4px;
       font-size: 10px;
       transition: .2s;
   }

   .gender-option span i {
       font-size: 10px;
   }

   .gender-option input:checked+span {
       border-color: #0b2147;
       background: #eef3f9;
       color: #0b2147;
       font-weight: 700;
   }


   /* =========================================================
   RESUME
========================================================= */

   .resume-upload {
       min-height: 58px;
       border: 1px dashed #cbd5e2;
       border-radius: 9px;
       background: #fafbfd;
       display: flex;
       align-items: center;
       padding: 7px 10px;
       gap: 10px;
   }

   .resume-icon {
       width: 35px;
       height: 35px;
       min-width: 35px;
       background: #fff4d0;
       color: #d69d00;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .resume-content {
       flex: 1;
       min-width: 0;
   }

   .resume-content strong {
       display: block;
       font-size: 11px;
       color: #344158;
   }

   .resume-content small {
       display: block;
       color: #98a2b1;
       font-size: 9px;
       margin-top: 2px;
   }

   .resume-upload input[type="file"] {
       display: none;
   }

   .resume-button {
       margin: 0;
       cursor: pointer;
       background: #0b2147;
       color: #fff;
       border-radius: 7px;
       padding: 7px 12px;
       font-size: 10px;
       font-weight: 700;
   }


   /* =========================================================
   TERMS
========================================================= */

   .register-terms {
       display: flex;
       align-items: flex-start;
       gap: 8px;
       margin-top: 15px;
       margin-bottom: 15px;
   }

   .register-terms input {
       margin-top: 2px;
       accent-color: #0b2147;
   }

   .register-terms label {
       color: #7d8898;
       font-size: 10px;
       line-height: 1.5;
   }

   .register-terms a {
       color: #0b5ed7;
       font-weight: 700;
       text-decoration: none;
   }


   /* =========================================================
   SUBMIT
========================================================= */

   .register-submit {
       width: 100%;
       height: 46px;
       border: 0;
       border-radius: 9px;
       background: #0b2147;
       color: #fff;
       font-size: 13px;
       font-weight: 700;
       cursor: pointer;
       transition: .2s ease;
   }

   .register-submit i:first-child {
       color: #ffbd00;
       margin-right: 7px;
   }

   .register-submit .submit-arrow {
       color: #fff;
       margin-left: 8px;
       font-size: 11px;
   }

   .register-submit:hover {
       background: #123766;
       transform: translateY(-1px);
       box-shadow: 0 7px 18px rgba(11, 33, 71, .16);
   }


   /* =========================================================
   LOGIN
========================================================= */

   .register-login {
       text-align: center;
       color: #8993a2;
       font-size: 11px;
       margin-top: 13px;
   }

   .register-login a {
       color: #0b2147;
       font-weight: 800;
       text-decoration: none;
       margin-left: 4px;
   }

   .register-login a:hover {
       color: #d69d00;
   }


   /* Security */

   .register-secure {
       border-top: 1px solid #edf0f4;
       margin-top: 13px;
       padding-top: 10px;
       text-align: center;
       color: #a0a9b6;
       font-size: 9px;
   }

   .register-secure i {
       color: #1c9b63;
       margin-right: 4px;
   }


   /* =========================================================
   RESPONSIVE
========================================================= */

   @media (max-width: 991px) {

       .jobbeku-register-section {
           padding: 20px 12px 40px;
       }

       .register-left-content {
           padding: 35px;
       }

       .register-left h1 {
           font-size: 34px;
       }

       .register-right {
           padding: 30px;
       }

   }


   @media (max-width: 575px) {

       .jobbeku-register-section {
           padding: 10px 8px 30px;
       }

       .jobbeku-register-wrapper {
           border-radius: 16px;
       }

       .register-left-content {
           padding: 28px 22px;
       }

       .register-left h1 {
           font-size: 29px;
       }

       .register-intro {
           font-size: 12px;
       }

       .register-benefit small {
           font-size: 10px;
       }

       .register-location-box {
           margin-top: 25px;
       }

       .register-right {
           padding: 25px 17px;
       }

       .register-card-header h2 {
           font-size: 20px;
       }

       .register-card-header p {
           font-size: 11px;
       }

       .gender-options {
           gap: 3px;
       }

       .gender-option span {
           font-size: 9px;
       }

   }