/* ================================ */
/* Container for the Entire Form    */
/* ================================ */
.lkr-user-form {
  max-width: 600px;
  margin: 20px auto;
  background: #fff;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ================================ */
/* Standard Form Groups             */
/* (Groups 1, 2, 3, 4, 5, 6, 7, 8)   */
/* ================================ */
.lkr-user-form .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* Fixed label styling */
.lkr-user-form .form-group label {
  width: 200px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Inputs/selects styling for standard groups */
.lkr-user-form input[type="text"],
.lkr-user-form input[type="email"],
.lkr-user-form input[type="tel"],
.lkr-user-form select {
  width: calc(100% - 200px);
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border 0.3s, box-shadow 0.3s;
}

.lkr-user-form input[type="text"]:focus,
.lkr-user-form input[type="email"]:focus,
.lkr-user-form input[type="tel"]:focus,
.lkr-user-form select:focus {
  border-color: #0073aa;
  outline: none;
}

/* ================================ */
/* Mobile Group (Group 9)           */
/* ================================ */
.lkr-user-form .mobile-group {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* Mobile group label: same as standard groups */
.lkr-user-form .mobile-group label {
  width: 200px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Mobile-input container: holds the country code and mobile number */
.lkr-user-form .mobile-group .mobile-input {
  display: flex;
  gap: 10px; /* space between the two inputs */
  width: calc(100% - 200px);
}

/* Country Code input: 30% width */
.lkr-user-form .mobile-group .mobile-input input.country-code {
  width: 30%;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border 0.3s;
}

/* Mobile Number input: 70% width */
.lkr-user-form .mobile-group .mobile-input input.mobile-number {
  width: 70%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border 0.3s;
}

.lkr-user-form .mobile-group .mobile-input input.country-code:focus,
.lkr-user-form .mobile-group .mobile-input input.mobile-number:focus {
  border-color: #0073aa;
  outline: none;
}

/* ================================ */
/* Privacy Policy Group (Group 10)  */
/* Independent from the standard group: no fixed label width */
/* ================================ */
.lkr-user-form .privacy-policy {
  margin-bottom: 16px;
}

.lkr-user-form .privacy-policy label {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  /* Display inline so it starts from the left */
  display: inline;
}

.lkr-user-form .privacy-policy label input {
  margin-right: 8px;
  vertical-align: middle;
}

/* ================================ */
/* Submit Button (Group 11)         */
/* Right Aligned                    */
/* ================================ */
.lkr-user-form .submit-group {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.lkr-user-form button.button-primary {
  background: #0073aa;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.lkr-user-form button.button-primary:hover {
  background: #005a87;
}